Vue计算属性与监视属性

计算属性

计算属性：

1. 定义：要用的属性不存在，要通过已有属性计算得来。
2. 原理：地城记住了Object.defineproperty方法提供的getter和serter。
3. get函数什么时候执行？

   1. 初次读取f时会调用一次。

   2. 所依赖的数据发生变化时会再次调用。

4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5. 备注：

   1. 计算属性最终会出现在vm上，直接读取使用即可。

   2. 如果计算属性被修改，那必须写set函数去相应修改，且set中有引用的计算时依赖的属性发生变化，一般情况下计算属性不会修改。

   3. 计算属性不能靠异步任务去返回返回值，因为它是靠返回值获取对应值的。

<div id="root">
    <!-- @keyup.enter代表回车键弹起 -->
    请输入姓：<input type="text" v-model="name_1">
    <br>
    请输入名：<input type="text" v-model="name_2">
    <br>
    输入的内容：<label>{{fullName}}</label>
    <hr>
</div>
<script>
    let val = "xin";
    const vm = new Vue({
        el: "#root",
        data: {
            name_1: "",
            name_2: ""
        },
        computed: {
         //------完整版写法-------
            fullName: {
                //get的作用：当读取fullName时，get就会被调用，且返回值为fullName的值。
                //get的调用：初次读取fullName时，所得来的数据发生变化时。
                get() {
                    //此处的this是vue对象
                    return this.name_1 + "-" + this.name_2;
                },
 
                //修改fullName的属性时会被调用
                //一般情况下计算属性不会修改
                set(value) {
                    let arr = value.split("-");
                    this.name_1=arr[0];
                    this.name_2=arr[1];
                }
            }
        //-------简写版写法（只考虑读取不考虑修改时才能用简写形式）-------
            //与只有一个get函数的效果相同，调用方法与插值语法一样，不加括号
            fullName(){
                return this.name_1 + "-" + this.name_2;               
            }
        }
    })
</script>

监视属性（侦听属性）

监视属性：

1. 被监视的属性变化时，回调函数自动调用，进行相关操作。
2. 被监视属性必须存在才能进行监视（被监视的属性可以是计算属性）
3. 监视属性的两种写法：
   1. new New时传入watch配置。
   2. 通过vm.$watch监视。

<div id="root">
    <h1>今天天气很{{info}}</h1>
    <br>
    <button @click="changeWeather">点我切换</button>
    <hr>
</div>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            isHot: true
        },
        computed: {
            info() {
                return this.isHot ? "热" : "冷";
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            //监听isHot值得改变
            isHot: {
                immediate: false,  //初始化的时候自动调用handler，默认是false，旧参数值（lowValue为undefine）
                //isHot改变时会调用handler,第一次参数是新的值，第二个参数是旧的值。
                handler(newVlaue, lowValue) {
                    console.log("isHot被改了 " + "新的值：" + newVlaue + " 旧的值：" + lowValue);
 
                }
            }
        }
    })
 
    //后续添加监视属性
    vm.$watch("isHot",{
            //监听isHot值得改变
            isHot: {
            immediate: false,  //初始化的时候自动调用handler，默认是false，旧参数值（lowValue为undefine）
            //isHot改变时会调用handler,第一次参数是新的值，第二个参数是旧的值。
            handler(newVlaue, lowValue) {
                console.log("isHot被改了 " + "新的值：" + newVlaue + " 旧的值：" + lowValue);
 
            }
        }
    });
 
</script>

深度监视（深度侦听）

深度监视：

1. vue中的watch默认不监测对象内部值的改变（一层）。
2. 配置deep:true可以监测队形内部值的改变（多层）。
3. vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以。
4. 使用watch是根据数据的具体结构，决定是否采用深度监视。
5. 如果使用简写方式就不能进行深度监视等操作了。

<div id="root">
    <h1>a的值{{number.a}}</h1><br>
    <button @click="number.a++">改变a的值</button>
    <hr><br>
    <h1>b的值{{number.b}}</h1><br>
    <button @click="number.b++">改变a的值</button>
    <hr>
</div>
 
<script>
    new Vue({
        el: "#root",
        data: {
            number: {
                a: 1,
                b: 2
            }
        },
 
        watch: {
            //监测number中的属性a是否改变
            "number.a": {
                handler(){
                    console.log("a的值改变了");
                }
            },
 
            //监测number的所有属性是否改变
            number:{
                deep:true,
                handler(){
                    console.log("number有值改变了");
                }
            }
        }
    })
 
//----------------------------后续添加监听属性-----------------------------------
 
    //正常写法
    vm.$watch("number",{
        immediate:true,
        deep:true,
        handler(newValue, lowValue){
            console.log("number的值改变了" + "新的值：" + newValue + " 旧的值" + lowValue);
        }
    })
 
    //简写方法
    vm.$watch("xin",function(newValue, lowValue){
        console.log("xin-的值改变了" + "新的值：" + newValue + " 旧的值" + lowValue);
    })
 
</script>

 computed与watch的区别

computed与watch的区别：

1. computed能完成的功能，watch都可以完成。
2. watch能完成的功能computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

1. 所有被vue管理的函数，最好写成普通函数，这样this的指向才是vm或者组件实力对象。
2. 所有不被vue管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或者组件实例对象。