【Vue】计算属性 与 监视属性

计算属性

        要用的属性不存在，要用已有的属性计算得来

        借助了Object.defineProperty方法提供的setter与getter

        与methods实现相比，内部有缓存机制，效率更高，调试方便

    <div id="app">
        姓：<input type="text" v-model="firstname"> <br>
        名：<input type="text" v-model="lastname"> <br>
        全名： {{fullname}} 
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    firstname: "小猪",
                    lastname:"佩奇"
                }
            },
            computed:{
                fullname(){
                    return this.firstname + '-' + this.lastname
                }
            }
        })
    </script>

监视属性

        当被监听的属性发生改变时，回调函数自动调用

• handler（newValue， oldValue）   当其属性改变时触发
• immediate：true       初始化时，让handler调用一下
• deep：true                监测对象内部值改变（多层）

         vue中的watch默认不监视对象值内部的变化（一层）

深度监视

    <div id="app">
        <h1>今天的天气很{{info}}</h1>
        <button @click="isHot = !isHot">点击切换天气</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    info: false,
                }
            },
            watch:{
                // 监视多级结构中某个属性的变化
                'number.a':{
                    handler(){
                        console.log('a改变了');
                    }
                },
                // 监视多级结构中所有属性的变化
                number:{
                    deep: true,
                    handler(){
                        console.log('number改变了');
                    }
                }
            }
        })
    </script>

简写

        当不使用immediate、deep方法时，函数当作handler方法写

watch:{
    isHot(){
        ....
    }
}

vm.$watch("isHot", function(){
    ...
})

计算属性与监听属性的区别

    1.computed能完成的功能，watch都可以完成

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