官方文档：计算属性和侦听器 — Vue.js (vuejs.org) (opens new window)

计算属性 computed

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

1. 定义：要用的属性不存在，要通过已有属性计算得来。

2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

3. get 函数什么时候执行？

   • 初次读取时会执行一次。

   • 当依赖的数据发生改变时会被再次调用。

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

5. 备注：

   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
}

// Make sure to add code blocks to your code group

监视属性 watch

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

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

• (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)
} 

// Make sure to add code blocks to your code group

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

• 计算属性变量在 computed 中定义，监视属性监听的是已经在 data 中定义的变量, 当该变量变化时，会触发 watch 中的方法.

• computed 具有缓存功能，可以监听对象某个具体属性。

• watch 可以进行深度监听，监听对象的变化。

• 计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新 DOM。监视属性的是定义的变量，当定义的值发生变化时，执行相对应的函数。

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

代码示例：

<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>

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

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