vue中watch与computed的使用及区别

watch详解

watch的作用

1. 监听数据的变化,当数据的值发生变化时,立即执行对应的函数
2. 使用场景： 当在数据变化时，进行异步操作或开销较大的操作时，就需要使用监听器

watch监听的范围

1. 监听data中数据的变化 ,示例如下；

  var vm = new Vue({
    //......
    data: {
      name: "耿耿"
    },
    watch: {
      "name": function(newVal, oldVal) { 
       
      }
     *注释 : newVal:数据改变后的值, oldVal:数据改变之前的值*
    }
  })

2. 监听路由的改变；

var vm = new Vue({
    watch: {
      "$route.path": function() { }
    }
  })

3.** 监听props中接受的数据的变化**

 props: {
    basicData: {
      type: Object,
      default: ()=>{}
    }
  },
   watch: {
      'basicData.id':{
        handler(newData,oldData){
            console.log(newData,oldData)
        },
        deep:true
      }
  },

watch的使用方式

1. 基本用法(注:此方式当值第一次绑定的时候，不会执行监听函数)

watch: {
    name(newName, oldName) {
      // ...
    }
  } 

2. 直接写一个监听处理函数 , 当每次监听到值发生改变时，执行函数。(注:此方式当值第一次绑定的时候，不会执行监听函数)

watch: {
    name: 'nameChange'
    }
 } ,
 method:{
 	nameChange(newVal,oldVal){
 		console.log(newVal,oldVal)
	 }
}

3. 立即监听(immediate)

watch: {
    name: {
    　　handler(newName, oldName) {
      　　// ...
    　　},
    　　immediate: true
    }
  } 

5. 深度监听(deep)

watch: {
  obj: {
    handler(newName, oldName) { //特别注意，不能用箭头函数，箭头函数，this指向全局
      console.log('obj.a changed');
    },
    immediate: true,  //刷新加载 立马触发一次handler
    deep: true  // 可以深度检测到 obj 对象的属性值的变化
  }
}

上述这种写法对性能影响很大，修改obj里面任何一个属性都会触发这个监听器里的 handler。我们可以做如下处理：

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true
  }
}

computed详解

computed的作用

对于模板内任何复杂的逻辑，都应当使用计算属性

computed的使用

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。
只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

watch与 computed的区别

1. 功能上： computed是计算属性，计算某个属性的返回值; watch是监听属性, 监听一个值的变化，然后执行对应的回调。

2. 是否调用缓存： computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

3. 是否调用return： computed中的函数必须要用return返回，watch中的函数不是必须要用return。

4.是否在界面加载时立即执行: computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true

5. 使用场景： computed: 当一个属性受多个属性影响的时候，使用computed-------购物车商品结算。watch: 当一条数据影响多条数据的时候或者一条数据变化需要执行某些操作时，使用watch-------搜索框。