vue watch使用详解

在Vue.js中，watch是一个用来监听数据变化并执行相应操作( 用于监听data里面的数据变化)

watch的基本用法

 // 数据
  data: {
    message: 'Hello, Vue!'
  },
  // 监听器
  watch: {
    // 监听message属性
    message: function(newValue, oldValue) {
      // 处理函数，在message属性发生变化时执行
      console.log('message属性发生变化啦！');
      console.log('新值为：', newValue);
      console.log('旧值为：', oldValue);
    }
  }

watch深度监听、立即执行监听高级用法

1. immediate立即执行监听

 data: {
    immediateValue: 'initial'
  },
  watch: {
    immediateValue: {
      handler: function(newValue, oldValue) {
        console.log('immediateValue 变化了！');
        console.log('新值为：', newValue);
        console.log('旧值为：', oldValue);
      },
      immediate: true // 立即执行监听
    }
  }

将immediateValue设置为一个初始值，并使用watch的immediate监听。在Vue实例创建时，处理函数会立即执行一次，不必等到immediateValue的值发生变化才开始执行(值默认时就会执行一次)

2. deep（深度监听）

当你需要深度监听对象或数组内部值的变化时，可以使用watch的深度监听deep

 data: {
    deepObject: {
      propA: 'valueA',
      propB: 'valueB'
    },
    arr: ["12306","110","120"]
  },
  watch: {
    deepObject: {
      // 监听整个对象，每个属性值的变化都会执行handler(属性值发生变化后，获取的 newVal 值和 oldVal 值是一样的)
      handler: function(newValue, oldValue) {
        console.log('deepObject 变化了！');
        console.log('新值为：', newValue);
        console.log('旧值为：', oldValue);
      },
      deep: true // 开启深度监听
    },
     // 监听对象的某个属性，被监听的属性值发生变化就会执行函数(属性值发生变化后，获取的 newVal 值和 oldVal 值是不一样的)
     'deepObject.propA'(newVal, oldVal) {
       console.log('新值为：', newValue);
       console.log('旧值为：', oldValue);
     },
     // 补充知识
     arrChange(){
       // this.array[0] = 'hello'  // Vue中不支持这种方式
       this.$set(this.arr,0,'hello')
     }
  }

watch与computed区别(前端面试题)

watch

• return非必须
• 支持异步
• 不可随意修改名称，必须是data中定义的数据
• 不支持缓存，当数据发生变化时,直接会触发相应的操作。
• watch监听的函数有两个参数(newVal, oldVal)

computed

• 必须有return
• 不支持异步
• 可以自定义名称，一般用于复杂的计算逻辑运算
• 计算属性会进行缓存，只有当依赖发生变化时，计算属性才会重新计算，否则会直接返回之前缓存的值。