vue中computed 和 watch 的区别

computed

computed是被计算出来的属性（根据其他属性计算而来）,计算属性的结果会被缓存，除非依赖的数据变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。 同时使用直接写属性名字就行，不用加（）

<template>
  <div>
      {{displayName}}
      <div>
      {{displayName}}
      <button @click="add">set</button>
      </div>
  </div>
</template>

<script>
  export default{
    data(){
        return {
            user: {
              email: "250200****@qq.com",
              nickname: "刻晴",
              phone: "187****6557"
            }
        }
    },
    methods:{
        add(){
          console.log("add");
          this.displayName = "77";
        }
    },
    computed: {
        displayName: {
          get() {
            const user = this.user;
            return user.nickname || user.email || user.phone;
          },
          set(value) {
            console.log(value);
            this.user.nickname = value;
          }
        }
    },
  }
</script>

<style>
  
</style>

watch

watch是一个vue中监听器，当数据变化，执行一个函数

其中immediate:true表示在页面初始化时就会调用watch中监听的data属性，deep: true，表示data中一个对象的数据，不管他嵌套多少层，只要值变了，就会触发，而不像之前要对象的地址变了

watch: { 
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深 
    c: { handler: function (val, oldVal) { /* ... */ }, deep: true }, 
    // 该回调将会在侦听开始之后被立即调用 
    d: { handler: 'someMethod', immediate: true }, 
}