computed和watch的区别

143 阅读2分钟

Vue文档地址链接

conputed: cn.vuejs.org/v2/api/#com…

watch: cn.vuejs.org/v2/api/#wat…

computed计算属性

  • 类型:{ [key: string]: Function | { get: Function, set: Function } }

  • 详细:

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

注意如果你为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。

计算属性的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。注意,如果某个依赖 (比如非响应式 property) 在该实例范畴之外,则计算属性是不会被更新的。

//data添加name和age属性

new Vue{
    data:{
    name:'frank',
    age:'24'
  },
   computed:{  //计算出一个name+age的属性
     displayUsers: {
       get(){  //get()和set()函数给对象加一个伪属性
         return this.name + this.age  
      }
    }
   },
    template: `
     <div>
     {{displayUsers}}
     </div>
   `,
}

watch侦听

  • 类型:{ [key: string]: string | Function | Object | Array }

  • 详细:

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个 property。

//当数据发生变化时会执行一个函数

const vm = new Vue{
    data:{
        n:0
        new:[]
    }
    watch;{
        a:function(value,oldValue){
            console.log(value.oldValue)
        }
        // deep:true表示该回调在任何侦听对象的propety改变时调用,无论该嵌套有多深
        b:{
          handler:function(value,oldValue){console.log(value.oldValue)}
          deep:true
        }
        // immediate表示该回调在侦听开始就立即执行
        c:{
            handler:function(value,oldValue){console.log(value.oldValue)}
            immediate:true
        }
    }
}
vm.n=1  // new:1,old:0

选项

  • deep

为了发现对象内部值的变化,可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

  • immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调: