04.Vue3启示录：Options-API(v2) &侦听器-watch

1.Vue3的Options-API

1.1 复杂data的处理方式(计算属性)

1. 在模板中可以直接通过插值语句显示一些data中的数据；
2. 在某些情况下，我们需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示：

1. 多个data数据进行运算、三元运算法来决定结果、数据进行某种转化后显示；
2. 在模板中使用表达式，可以非常方便实现，但是设计它们的初衷是用于简单的运算；
3. 在模板中放入太多的逻辑会让模板过重和难以维护；
4. 如果多个地方都使用到，会有大量重复的代码。

3. 如何将逻辑抽离:

1. 一种方式: 将逻辑抽取到一个method中，当到methods的options中；
2. 弊端：所有的data使用过程都会变成一个方法的调用；
3. 另一种方式就是使用计算属性computed；

1.2 认识计算属性computed

4. 对于任何包含响应式数据的复杂逻辑，都应该使用计算属性；
5. 计算属性将被混入到组件实例中，所以的getter和setter的this上下文自动的绑定组件实例；
6. 用法：

选项：computed
类型：{[key:string]: Function | {get: Function , set: Function } }

7. 计算属性会有缓存当使用多次的时候，只会执行一次；
8. 计算属性 VS methods

1. 重复调用的时候，计算属性(computed)执行一次，methods执行多次；
2. 计算属性会有缓存，当我们多次使用计算属性时候，我们计算属性中的运算只会执行一次；
3. 修改data中的数据的时候，计算属性会随着依赖的数据的改变而进行重新计算；
4. 计算属性获得新的值的时候，再会进行重新缓存；

1.3 计算属性的setter和getter

1. 计算属性在大多数情况下，只需要一个getter方法就可以，所以我们会将计算属性直接写成一个函数；
2. 用法:

1. computedName: { get: Function , set: Function }

3. 一般对一个对象进行setter方法的调用时，我们称这个set为setter方法；

2. 认识侦听器watch

2.1 watch

1. 什么是侦听器？

1. 开发中我们在data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中；
2. 当数据变化时，template会自动进行更新来显示最新的数据；
3. 某些情况下，我们希望代码逻辑中监听某个数据的变化，这个时候用侦听器watch完成；

2. 侦听器写法：watchName(newValue,oldValue){ }
3. watch一般不会侦听计算属性(计算属性一般都不会元数据)

2.2 侦听器watch的配置选项

1. data中返回的数据最终会交给proxy进行劫持处理，最终数据会变成proxy，return的是一个proxy对象；
2. 界面的响应都会响应；
3. 默认情况下，侦听器只会针对监听的数据本身的改变；

监听一个对象，改变这个对象会被监听到，如果改变对象中的某个属性不会被侦听到；

4. 深度侦听 / 立即执行(页面执行完之后立即执行一次)

                // 深度侦听 / 立即执行(一定会执行一次)
                info: {
                    immediate: true, // 立即执行
                    handler: function (newValue, oldValue) {
                        console.log(newValue, oldValue);
                    },
                    deep: true // 深度侦听
                }

2.3 侦听器watch的其他方式

1. 字符串方法名

b: ‘‘someMethod’’

2. 可以传入回调函数组，他们会被逐一调用

		F:[
                    "handle1", // method中定义好的函数
                    function handle2(val,oldVal){
                        console.log("handler2 triggered");
                    },
                    {
                        handler:function handler3(val,oldVal) {
                            console.log("handler3 triggered")
                        }
                    }
                ]

3. V3中没有提到，V2中有提到的是侦听对象的属性:

'info.name': function (newValue , oldValue) {
	console.log(newValue , oldValue)
}

4. 另一种方式是$watch的API

            created() {
                // 使用 unwatch（） 可以取消侦听器
                const unwatch = this.$watch("info", function (newValue, oldValue) {
                    console.log(newValue, oldValue)
                }, {
                    deep: true,
                    immediate: true
                })
            },