computed

computed:依赖其他数据而计算得出的结果

有缓存 依赖项不变，多次调用都是从缓存取值；依赖项改变，函数会“自动”执行并重新缓存新的值。

监听自己定义的变量，不用在data中定义，直接在computed中定义，变然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

简单写法：

**使用场景：**当变量的值，需要通过别人计算而得来

语法:

computed:{ 定义的变量名：{ } }

完整写法

使用场景：给计算属性变量赋值时使用----可以用在输入框上，双向数据绑定

语法

computed: { 计算属性名: { set(val) {}, get() { return 值 } } }

**set函数：**set函数用一个变量接收外面传过来的值

**get函数：**get里要返回给这个计算属性具体值

<div id="app">

<p>计算属性的完整写法</p>
    <div>
      <span>姓名：</span>
      <input type="text"v-model="full" />
    </div>
</div>
</template>

<script>
export default {
 // ###计算属性的完整写法
  computed: {
    // full() {
    //   return "无名氏";
    // 坑：用计算属性简单写法，给视图层赋值时，会报错显示需要设置setter，此时需要用到计算属性的完整用法
    // },
    // ###计算属性的完整写法
    full: {
      // set、get函数是固定用法
      // set函数用一个变量接收外面传过来的值
      set(val) {
        console.log(val);
      },
      get() {
        //  get函数return一个默认值
        return "无名氏";
      },
    },
  },
}
</script>

watch

主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据，它不具有缓存性场景：侦听data/computed属性值的改变

简单语法：

  要侦听的数据名(newVal, oldVal) {
    // 当数据变化时, 函数调用
  }
}

deep深度侦听

场景：侦听复杂类型或立即执行侦听函数

变量名：{
handler(newVal,oldVal){
   }，
deep:true//深度监听（对象里面的值改变），
immediate:true,//立即侦听执行，页面一打开就侦听
   }

格式

方法格式

缺点：若侦听的是一个对象，若对象中的属性发生了变化，不会触发侦听器

对象格式

好处

可以通过immediate选项，让侦听器自动触发（也就是一打开页面就立即侦听一次）

immediate默认值是false，它的作用控制侦听器自动触发一次，若想知道触发则改为true 可以通过deep选项，deep:true让侦听器深度监听每个属性的变化

区别：

watch：监测的是属性值，只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。
computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。
计算属性不能执行异步任务，计算属性必须同步执行

vue中computed 和watch 的区别？