为什么这个watch的新值就值不显示_vue watch immediate ref 获取不了-CSDN博客

本文链接：https://blog.csdn.net/weixin_40945354/article/details/128428324

这个博客展示了如何在 Vue.js 中使用 ref 和 reactive 创建响应式数据，并通过 watch 深度监听对象属性变化，包括修改 count 值、更新对象属性及监听 brand 品牌名称变化。示例中详细演示了如何监听并响应数据更新，适用于前端开发学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="container">
    <div>
      <p>count的值：{{count}}</p>
      <button @click="add">改数据</button>
    </div>
    <hr>
    <div>
      <p>{{obj.name}}</p>
      <p>{{obj.age}}</p>
      <p>{{obj.brand.name}}</p>
      <button @click="updateName">改名字</button>
      <button @click="updateBrandName">改品牌名字</button>
    </div>
  </div>
</template>
<script>
import { reactive, ref, watch } from 'vue'
export default {
  name: 'Home',
  setup() {
    const count = ref(0)
    const add = () => {
      count.value++
    }
    // 当你需要监听数据的变化就可以使用watch
    // 1. 监听一个ref数据
    // watch(count, (newVal,oldVal)=>{
    //   console.log(newVal,oldVal)
    // })

    const obj = reactive({
      name: 'ls',
      age: 10,
      brand: {
        id: 1,
        name: '宝马'
      }
    })
    const updateName = () => {
      obj.name = 'zs'
    }
    const updateBrandName = () => {
      obj.brand.name = '奔驰'
    }
    // 2. 监听一个reactive数据
    watch(obj, ()=>{
      console.log('数据改变了')
    })

    watch(obj.brand.name, (newValue, oldValue) => {
  console.log('The new counter value is: ' + obj.brand.value)
  console.log("new counter======{}==",newValue);
  console.log("old counter======{}==",oldValue);
})



    watch(()=>obj.brand, ()=>{
      console.log('brand数据改变了')
      console.log()
    },{
      deep: true,
      immediate: true
    })

    return {count, add, obj, updateName, updateBrandName}
  }
}
</script>