• computed 是vue独有的特性计算属性,可以对data中的值再进行一个重新的计算,computed是支持缓存的,只有依赖数据发生改变，才会重新进行计算。

• watch 我理解的是监听data里面的所有属性的新旧值的变化吧

计算属性

变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号
如果是在methods里面声明的话,在调用的时候需要加上小括号例如：fullName()

<div id="app">
  <input type="text" v-model="firstName" /><br />  //我是
  <input type="text" v-model="lastName" /><br />   //计算属性
  <input type="text" v-model="fullName" /><br />   //我是计算属性
</div>

 data() {
    return {
      firstName: "我是",
      lastName: "计算属性",
    };
  },
  computed: {
    fullName() {
      return this.firstName + "" + this.lastName;
   },
 },

侦听器(watch)

watch是一个对象所以用的时候要使用watch:
有三种使用的方式
第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
第二个是deep：其值是true或false；确认是否深度监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以监听到。）
第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数

普通方式

<div>
     <p>FullName: {{fullName}}</p>
     <p>FirstName: <input type="text" v-model="firstName"></p>
</div>

data: {
    firstName: 'Dawei',
    lastName: 'Lou',
    fullName: ''
  },
  watch: {
　　 //普通的watch监听
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  } 
// 现在我们对于firstName监听了。在进行input框输入的时候,就会触发到watch，改变data中的fullName

使用handler&immediate

在上面这个方法中第一次绑定watch是不会执行的,可以使用这两个属性进行在第一次绑定的时候就会执行了

firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
 }

deep进行深度监听

watch 监听的时候会返回一个obj新的obj对象和改变前的obj对象

  <p>obj.a: {{ obj.a }}</p>
  <p>obj.a: <input type="text" v-model="obj.a" /></p>

data() {
    return {
      obj: {
        a: 123,
      },
    };
  },
  watch: {
    obj: {
      handler(newName, oldName) {
        console.log(newName, oldName);
      },
      immediate: true,
      deep: true,
    },
  },