vue计算属性与监视属性

计算属性computed

计算属性
1.定义：要用的属性不存在，要通过已有属性计算得来
2.原理：底层借助了Object.defineproperty方法提供的getter和setter
3.get函数什么时候执行？
（1）初次读取时会执行一次
（2）当依赖的数据发生改变时会被再次调用
4.优势：computed与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
5.备注：
1.计算属性最终会出现在vm上，直接读取即可
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要计算时依赖的数据发生改变

<div id="root">
   	姓：<input type="text" v-model="firstName"><br><br>
    名：<input type="text" v-model="lastName"><br><br>
    姓名：<span>{{fullName}}</span>
</div>

// 只要data中的数据发生改变，vue就会重新解析模板
const vm = new Vue({
    el:'#root',
    data:{
        firstName:"张",
        lastName:"三",
    },
    //methods中无缓存(有几次读取几次)，computed中有缓存(只会读取一次)
    computed:{
        fullName:{
            // get和set都是被vue管理的函数，所以this指向vue实例对象
            get(){
                console.log('get被调用了')
                console.log(this)  //get中的this会被处理，指向vm
                return this.firstName + '-' + this.lastName
            },
            set(value){
                console.log('set被调用了')
                const arr = value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }
    }
})

监视属性watch

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

<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>

const vm = new Vue({
    el:"#root",
    data:{
        isHot:true
    },
    computed:{
        info(){
            return this.isHot ? '炎热':'凉爽'
        }
    },
    methods: {
        changeWeather(){
            this.isHot = !this.isHot
        }
    },
    watch:{
        isHot:{
            immediate:true,//初始化时让handler调用一下
            //handler在isHot发生改变时调用
            handler(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue);
            }
        }
    }
})