Vue：computed 和 watch 的区别

computed

computed是计算属性的意思,

是用来计算出一个值的，本身的 value 是一个obj，自定义的computed方法可以是一个函数也可以是一个obj包含了 getter和 setter。

它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存如果数据没有发生改变则使用缓存，不会重新加载。

<template>
  <div class="hello">
      {{fullName}}
  </div>
</template>

<script>
export default {
    data() {
        return {
            firstName: '飞',
            lastName: "旋"
        }
    },
    props: {
      msg: String
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    }
}
</script>

应用场景

如果数据要通过复杂逻辑来得出结果，那么就推荐使用计算属性

如果一个数据依赖于其他数据，那么把这个数据设计为computed的

watch

watch 是用来监听数据的。

一个对象，键是 data 对应的数据，值是对应的回调函数。值也可以是方法名，或者包含选项的对象，当 data 的数据发生变化时，就会发生一个回调，他有两个参数，一个val（修改后的 data 数据），一个oldVal（原来的 data数据）

Vue实例将会在实例化时调用$watch()，遍历 watch对象的每一个属性

• 基础列子

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
      <button @click="obj = {a:'a'}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 变了")
    },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 变了")
    },
      immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
    }
  }
}).$mount("#app");

• deep 控制是否要看这个对象里面的属性变化
• immediate 控制是否在第一次渲染是执行这个函数
• vm.$watch()的用法和watch 回调类似
• vm.$watch('data属性名', fn, {deep: .., immediate: ..})

应用场景

如果一个数据需要被监听并且对数据做一些操作就用watch