computed和watch有什么区别?

computed

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

详细:

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

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

computed: {
    
    
  aDouble: vm => vm.a * 2
}

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

示例:

var vm = new Vue({
    
    
  data: {
    
     a: 1 },
  computed: {
    
    
    // 仅读取
    aDouble: function () {
    
    
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
    
    
      get: function () {
    
    
        return this.a + 1
      },
      set: function (v) {
    
    
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

watch

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

详细:

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

示例:

var vm = new Vue({
    
    
  data: {
    
    
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
    
    
      f: {
    
    
        g: 5
      }
    }
  },
  watch: {
    
    
    a: function (val, oldVal) {
    
    
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
    c: {
    
    
      handler: function (val, oldVal) {
    
     /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
    
    
      handler: 'someMethod',
      immediate: true
    },
    // 你可以传入回调数组,它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) {
    
     /* ... */ },
      {
    
    
        handler: function handle3 (val, oldVal) {
    
     /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) {
    
     /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

注意,不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。

computed和watch区别?适用场景

computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;
watch: 更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;

computed:  
  computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
  computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择。
  
watch:
  watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象,但是我们不能类似这样监控。
  watch一般用于监控路由、input输入框的值特殊处理等等,它比较适合的场景是一个数据影响多个数。

猜你喜欢

转载自blog.csdn.net/qq_42526440/article/details/114268731