watch 监听属性

watch 监听属性

用于监听data中数据值所产生的改变

使用方法:在export default中写下 watch方法

监听事件中直接书写你需要监听的对象 ,其中可以使用的形参有newval与oldVal

export default {
  data() {
    return { num: 20 };
  },
  watch: {
    //第一种格式
    //直接使用需要监听的函数化为对象   
    num(newVal, oldVal) {
      console.log("num的值产生了改变", newVal, oldVal);
    },
  
    //第二种格式  
    num: {
    //固定的函数名称为handler,而此时需要监听的对象名就化成对象
      handler(newVal, oldVal) {
        console.log("num的值产生了改变", newVal, oldVal);
 },},},};

 

立即监听与深度监听

• 立即监听 页面刷新的时候能够监听到num数据从undefined变成指定值的过程

• 普通监听无法一进入页面就开始监听,需要进行事件操作,而立即监听一进入网页就可以监听到

• 深度监听,获取不到新值与旧值,但是能获取到对象中某个属性被更改时而触发

watch: {
    Obj: {
      handler(newVal, oldVal) {
        console.log("num的值产生了改变", newVal, oldVal);
      },
      deep: true, //深度监听
      immediate: true, //立即监听
    },},

注: 一般不推荐直接监听整个对象,建议监听对象中某个而具体的属性

  "obj.name": {
   handler(newVal, oldVal) {
   console.log("数据被改变了", newval, oldVal);
   },

 

 

Watch与Computed的区别

• watch中的函数是不需要调用的，computed内部的函数调用的时候不需要加()

• watch(属性监听)，监听的是属性的变化，而computed(计算属性)，是通过计算而得来的数据

• watch需要在数据变化时执行异步或开销较大的操作时使用，而对于任何复杂逻辑或一个数据属性，在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性computed。

• computed 属性的结果会被缓存，且computed中的函数必须用return返回最终的结果

• watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；

 

Watch与Computed的使用场景

• computed

  • 当一个结果受多个属性影响的时候就需要用到computed

  • 最典型的例子： 购物车商品结算的时候

• watch

  • 当一个数据的变化需要有额外操作的时候就需要用watch

  • 搜索数据

• 总结：

  • 一个值的结果受其他值的影响，用computed

  • 一个值的变化将时刻影响其他值，用watch

watch擅长处理的场景：一个数据影响多个数据 (一般用于异步或者开销较大的操作) 监听到数据的变化，去指定响应的操作 computed擅长处理的场景：一个数据受多个数据影响 (对于任何复杂逻辑，你都应当使用计算属性)