vue计算属性computed && 侦听器watch

一、计算属性

1.vue中的计算属性：

（1）提供了和data数据属性一样的属性，页面渲染调用数据时使用一样的语法规则（直接调用属性值，不需要再执行方法）

//调用data变量
   <p>data-info:{{ info }}p>
//调用computed变量
   <p>computed-msg:{{ msg }}p>
    createApp({
            data() {
                return {
                    info: "data属性info",
                }
            },
            computed: {
                // key 属性名，value是执行方法，但必须存在return提供属性返回值
                msg: function () {
                    return "计算属性msg"
                }
            }

（2）但是又能兼顾vue方法属性中的逻辑操作(计算属性中的this指向vue的当前应用实例)

2.计算属性的特性：

（1）默认情况下计算属性构建的变量为只读变量，只能读取，不能修改；当通过页面来试图修改计算属性的变量值时，会打印 readonly 警告！

（2）通过对象取值的配置，可以实现计算属性的双向操作功能（即页面修改能修改计算属性变量，计算属性变量渲染到页面）

3.应该场景：

（1）可以将页面的相关赋值逻辑操作定义在计算属性中，页面直接调用计算属性的返回值来达到控制逻辑的效果，简化页面模板语法的定义；

（2）计算属性具有缓存特性，可以通过缓存规则，减少多次调用属性时的逻辑操作方法的调用的次数，提升运行性能；

       计算属性的缓存功能，在所依赖的变量没有发生变化时，计算属性不会触发重新计算，只有当计算属性所依赖的变量变化时，他才会再次触发计算属性；

（3）通过计算属性的双向操作功能（对象形式取值，通过get(),set()方法），可以将页面具有双向功能，但是逻辑不同的操作模拟成普通属性的双向功能；

username:{{ username }}
//input框修可以通过set方法来修改username的值

三、this.$watch

通过vue提供的应用实例方法 $watch 完成变量监视器的定义；

$watch定义的监视器会返回一个 关闭该监视器的回调方法；

语法：

 vue实例.$watch(expOrFn, callback, [options])

                + expOrFn : 接收被监控的变量的名称 或者 和监控变量有关的方法

                                + 定义字符串表达式时，等效于对变量直接完成监控控制

                                 + 定义方法且方法返回值绑定了相关变量，等同于对绑定的所有变量统一完成监控

                + callback : 变量发生变化时执行的回调函数

                + options : 取值 Object ，用于定义除handler以外的其它监视配置（深度监控，初始调用……）

 问题引入：

vue中如何同时对多个变量定义统一监控方法?

                方式1：通过计算属性

                方式2：通过$watch完成监控

    
        
num1:{{ num1 }}
        
        
num2:{{ num2 }}
        
        
求和：{{ num1+num2 }}
        
求和：{{ sum }}
        
        
msg:{{ msg }}
        
        
        
        
        
        
num3:{{ num3 }}
        
        
num4:{{ num4 }}
        
        
求和：{{ num3+num4 }}