computed 和 watch 的区别

一、

  1. computed 是用来计算属性
  2. watch 是用来监听

二、

（一）computed

  1. computed是用来计算一个值，如果调用它，不需要加括号
  2. computed 会根据依赖自动缓存
new Vue({
    data: {
        user: {
            email: "fangfang@qq.com",
            nickname: "方方",
            phone: "2344555667"
        }
    },
    computed: {
        displayName: {
            get() {
                const user = this.user;
                return user.nickname || user.email || user.phone;
            },
            set(value) {
                console.log(value);
                this.user.nickname = value;
            }
        }
    },

    // 用 computed 来计算 displayName
    template: `
    <div>
      {{displayName}}
      <div>
      {{displayName}}
      <button @click="add">set</button>
      </div>
    </div>
  `,
    methods: {
        add() {
            console.log("add");
            this.displayName = "圆圆";
        }
    }
}).$mount("#app");

（二） watch

watch 有两个选项
  1. immediate 表示是否在第一次渲染时执行fn
  2. deep 如果监听一个对象，是否要看该对象里面的属性变化。
如果某个属性变化了，就执行fn
watch 的语法
第一种
watch: {a: function (newVal, oldVal) {}} || watch: {a() {}}
//第二个是第一个的缩写
watch: {b: [f1,f2]}
//在b变化时，依次执行f1,f2
watch: {c: 'methodName'}
//到methods里找对应名字函数
watch: {d: {handler:fn, deep:true, immediate:true}}

不要用箭头函数来定义 watch 函数，箭头函数的this指的是window

第二种

vm.$watch('n', function(){}, {immediate: true}) //‘n'可以改为一个返回字符串的函数

三、总结

  • 如果一个数据需要经过复杂计算就用 computed
  • 如果一个数据需要被监听并且对数据做一些操作就用 watch