嗨！~ 大家好，我是YK菌 🐷 ，一个微系前端 ✨，爱思考，爱总结，爱记录，爱分享 🏹，欢迎关注我呀 😘 ~ [微信号: yk2012yk2012，微信公众号：ykyk2012]

「这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战 (opens new window)」

今天我们来聊聊计算属性和监视属性今天学习Vue基础知识...本文是我刚学Vue时的笔记，参考的是B站尚硅谷的视频....

# 1. 计算属性 computed

在computed属性对象中定义计算属性的方法，在页面中使用来显示计算的结果

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

//完整写法
fullName:{
    get(){
        console.log('get被调用了')
        return this.firstName + '-' + this.lastName
    },
    set(value){
        console.log('set',value)
        const arr = value.split('-')
        this.firstName = arr[0]
        this.lastName = arr[1]
    }
}

//简写
fullName(){
    console.log('get被调用了')
    return this.firstName + '-' + this.lastName
}

# 2. 监视属性 watch

通过vm对象的$watch()或watch配置来监视指定的属性，当属性变化时, 回调函数自动调用, 在函数内部进行计算

当被监视的属性变化时, 回调函数自动调用, 进行相关操作
监视的属性必须存在，才能进行监视！！
监视的两种写法：

(1). new Vue时传入watch配置

watch:{
    isHot:{
        immediate:true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    }
}

(2). 通过vm.$watch监视

vm.$watch('isHot',{
    immediate:true, //初始化时让handler调用一下
    //handler什么时候调用？当isHot发生改变时。
    handler(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue)
    }
})

深度监视：

(1). Vue中的watch默认不监测对象内部值的改变（一层）。
(2). 配置deep:true可以监测对象内部值改变（多层）。

备注：

(1). Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2). 使用watch时根据数据的具体结构，决定是否采用深度监视。

numbers:{
    deep:true,
    handler(){
        console.log('numbers改变了')
    }
}

简写

//正常写法
isHot:{
    // immediate:true, //初始化时让handler调用一下
    // deep:true,//深度监视
    handler(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue)
    }
}

//简写
isHot(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue,this)
}

# 3. 计算属性与监视属性的区别

计算属性变量在computed中定义，监视属性监听的是已经在 data 中定义的变量, 当该变量变化时，会触发 watch 中的方法.
computed 具有缓存功能，可以监听对象某个具体属性。
watch可以进行深度监听，监听对象的变化。
计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。监视属性的是定义的变量，当定义的值发生变化时，执行相对应的函数。
computed能完成的功能，watch都可以完成。watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

# 4. 例子

<div id="demo">
    姓：<input type="text" placeholder="First Name" v-model="firstName"><br>
    名：<input type="text" placeholder="Last Name" v-model="lastName"><br>
    姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"><br>
    姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="fullName2"><br>
    姓名3（双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"><br>

    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>

</div>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'A',
            lastName: 'B',
            fullName2: 'A B'
        },

        computed: {
            // 什么时候执行：初始化显示 / 相关的data属性数据发生改变
            // 做什么的: 计算并返回当前属性的值
            fullName1() { //计算属性中的一个方法，方法的返回值作为属性 （回调函数）
                console.log('fullName1()') // 必然会掉用
                return this.firstName + ' ' + this.lastName;
            },

            fullName3: { //不是函数是一个对象，里面有两个方法  
                get() {
                    // 回调函数 ： 1. 你定义的 2. 你没有调用 3. 但他最终执行了
                    // 1. 什么时候调用？ 2. 用来做什么
                // 回调函数 当需要读取当前属性值时回调  根据相关的数据计算并返回当前属性的值
                    return this.firstName + ' ' + this.lastName;
                },

                set(value) {
                // 回调函数 监视当前属性值的变化 当属性值发生改变时回调  更新相关的属性数据
                const names = value.split(' ');
                this.firstName = names[0];
                this.lastName = names[1];
                }
            }
        },

        watch: { //配置监视
            firstName: function(value){ // firstName 发生了变化
                console.log(this); //就是vm对象
                this.fullName2 = value + ' ' + this.lastName;
            }
        }
    });

    vm.$watch('lastName', function(value) {
        //更新fullName2
        this.fullName2 = this.firstName + ' ' + value;
    })
</script>

在这里插入图片描述

最后【补充】两个重要的小原则：

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

最后，欢迎关注我的专栏，和YK菌做好朋友

模板语法样式绑定