Vue基础回顾(5)

在开发过程中，经常会犹豫到底是用computed还是watch，而且过多监听一些没必要的变化，也会造成一些性能损耗，因此来区别一下这两个。

watch和computed的区别

computed

• computed 是计算属性，它会根据你所依赖的数据动态显示新的计算结果,一旦涉及的其中一个数据发生变化就会计算。
• computed 不支持异步，如果里面有异步相关的操作，监听失效。
• comouted 有get和set方法，默认是get方法，返回属性值。相关数据发生变化时，调用set方法。
• 具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数 所以，如果数据要通过复杂逻辑来得出结果，那么就推荐使用计算属性

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  template: `
  <div>
  <p>我是原始值: "{{ message }}"</p>
  <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用
  </div>
  `,
  computed: {
    // 计算属性的 getter
    computedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

watch

• watch监听指定的那一个响应式变量，只有指定的那个值发生变化了才会调用。
• watch支持异步操作。
• watch不支持缓存，页面重新渲染时值不变化也会执行。
• watch函数有两个参数，一个是newVal,一个是oldVal。
• 不能用箭头函数来定义watch函数，箭头函数没有this，会指向函数外层的window，而不是vue实例。
• 可以实现深度监听。 所以，如果一个数据需要被监听并且对数据做一些操作或者开销比较大时就用 watch。

data(){
          return{
            first:'你看我变没变'
          }
        },
        watch:{
          first:function(newVal,oldVal){
            console.log(newVal,oldVal);
          }
        },