Vue的watch和computed

watch 监听

配置选项：监听数据的变化。当数据发生变化的时候，可以去做一些额外的操作。
语法：

watch: {
   key1: value1,
   key2: value2
}

key1、key2 是要监听的数据表达式
value1、value2 是处理函数。string | function | object | Array处理函数会自动接收到两个参数分别是：newVal, oldVal

watch: {
  1. 普通函数的写法
  a: function (newVal, oldVal) {
    console.log("newVal: ", newVal);
    console.log("oldVal: ", oldVal);
  },
  2. 对象函数的简写方式
  a(newVal, oldVal) {
    console.log("newVal: ", newVal);
    console.log("oldVal: ", oldVal);
  },
  3. 注意!!!不能使用箭头函数!!! methods 选项中也不要使用箭头函数
  a: (newVal, oldVal) => {
    console.log("newVal: ", newVal);
    console.log("oldVal: ", oldVal);
    console.log(this);
  },
  4. string 写法。hello 是指向的 methods 中 hello 函数
  a: "hello",
  5. object 写法
  a: {
    // 一定要提供 handler 属性，属性值就是处理函数
    handler(newVal, oldVal) {
      console.log("newVal: ", newVal);
      console.log("oldVal: ", oldVal);
      console.log(this);
    },
  },
  6. 为啥要有 object 写法，可以做更多监听配置，比如深度监听、默认触发监听函数一次
  深度监听: 对象中某个属性值发生变化默认是监听不到的
  obj: {
    handler(newVal, oldVal) {
      console.log("newVal: ", newVal);
      console.log("oldVal: ", oldVal);
    },
    deep: true, // 深度监听
    immediate: true, // 默认触发一次监听
  },
  7. 数组的写法 [string, function, { handler: function }, ...]
  a: [
    "hello",
    function () {
      console.log("f2");
    },
    {
      handler: function () {
        console.log("f3");
      },
    },
  ],
 8. key 的表达式写法 直接去监听某个对象数据中的某个属性 obj.name

  "obj.name": function (newVal, oldVal) {
    console.log(newVal);
    console.log(oldVal);
  },
},

computed 计算属性

基于其余的数据来计算出一份新的数据
语法：

computed: {
	key1: value1,
	key2: value2
}

key1 、key2 就是计算属性。
value1、value2 是对应的计算属性的处理函数（计算方式）。是一个函数，必须有返回值。返回值就是这个计算属性的值 function | object
计算机属性的特点：

1. 计算属性也可以像data中的数据一样去使用
2. 计算属性不允许手动去修改它的值，它的值是与他的依赖项有关的。只有依赖项发生变化，他的值才会发生变化。
3. 计算属性有缓存。默认计算出来之后，如果依赖项不发生变化，后续使用将一直使用的是缓存的数据。
4. 计算属性可以设置 setter 。但是就算有 setter 它也改变不了计算属性的值，真正能改变它的一直都是它的依赖项。
   实例：

computed: {
	fullName: {
		//获取这个计算属性的值的函数
		get: function() {
		}
		set: function() {
		// 对fullName做赋值的时候，会触发set函数
		// 间接的去改变他的依赖，从而实现看上去 fullName 变了的效果
		}
}