学习笔记：vue中watch和computed的区别

引用参考：https://www.jianshu.com/p/bb7a2244c7ca
https://www.cnblogs.com/widgetbox/p/8954162.html
https://segmentfault.com/a/1190000012948175?utm_source=tag-newest

computed

计算属性，当页面中有些数据依赖其他数据进行变动的时候使用。

<p id="app">  {{fullName}}  </p>

<script>
    var vm = new Vue({  
        el: '#app',  
        data: {  
            firstName: 'Foo',  
            lastName: 'Bar',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    })
</script>

• data中没有直接声明要计算的变量，也可以直接在computed中写入
• computed默认只有get，在需要的时候可以自己设定set

// ...
    computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }

这个时候在控制台直接运行vm.fullName = ‘bibi wang’，相应的firstName和lastName也会改变。

watch

watch用于观察和监听页面上的vue实例，变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })

• 如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。

  mimmediate属性

  watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。

watch: {
    firstName: {
      handler (newName, oldName) {
        this.fullName = newName + ' ' + this.lastName
      },
      immediate: true
    }
  },

immediate:true代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法

deep属性

• 不使用 deep 时，当我们改变 obj.a 的值时，watch不能监听到数据变化，默认情况下，handler 只监听属性引用的变化，也就是只监听了一层，但改对象内部的属性是监听不到的。
• 通过使用 deep: true 进行深入观察，这时，我们监听 obj，会把 obj 下面的属性层层遍历，都加上监听事件，这样做，性能开销也会变大，只要修改 obj 中任意属性值，都会触发 handler。

new Vue({
  template: `
    <div>
      <p>Obj.a: <input type="text" v-model="obj.a"/></p>
    </div>
  `,
  data: {
    obj: {
      a: '123'
    }
  },
  watch: {
    obj: {
      handler () {
        console.log('obj.a changed')
      },
      immediate: true
      // deep: true
    }
  }
})

• 但是监听到的newVal和oldVal是一样的，因为他们索引的是同一个对象/数组

  可以监听对象的单个属性

watch: {
    'obj.a': {
      handler () {
        console.log('obj.a changed')
      },
      immediate: true
      // deep: true
    }
  }

区别

• 缓存性：
  • computed具有缓存性，页面重新渲染值不变化，只有当所依赖的数据发生变化时，计算属性才会重新计算
  • watch没有缓存性，页面重新渲染时值不变化也会执行
• 绑定时执行 最初绑定时，watch不会执行

转载于:https://www.cnblogs.com/xiaoyuchen/p/11426715.html