1.计算属性

2.监视属性

3.计算属性与监视属性之间的关系

一.计算属性

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

   <div id="root">姓:<input type="text" v-model="firstName"><br><br>名:<input type="text" v-model="lastName"><br><br>全名:<span>{{fullName}}</span></div><script type="text/javascript">const vm = new Vue({el:'#root',data: {firstName:'张',lastName:'三'},computed: {fullName:{get() {return this.firstName + '-' + this.lastName},// 当fullName被修改时调用set(value) {const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}}})

8.  修改输入框中的内容时，下面的计算属性也会跟着变化

    9. 如果只考虑读取，不考虑修改的话，可以简写为以下形式 

   <script type="text/javascript">const vm = new Vue({el:'#root',data: {firstName:'张',lastName:'三'},computed: {// 完整写法// fullName:{//     get() {//         return this.firstName + '-' + this.lastName//     },//     set(value) {//         const arr = value.split('-')//         this.firstName = arr[0]//         this.lastName = arr[1]//     }// }// 简写形式：只考虑读取，不考虑修改的时候才能使用fullName() {return this.firstName + '-' + this.lastName}}})</script>

 二. 监视属性

（1）概念：监视属性是监视data的属性变化，也可以用于监视计算属性

（2）监视属性传的是一个配置对象，监视谁，在watch里面就写谁

 （3）监视的属性中必须包含一个handler函数，handler函数有两个参数，分别代表修改前和修改后的值，当监视的属性发生变化时，回调函数自动调用，进行相关操作

（4）也可以对commputed中的属性进行监视

        const vm = new Vue({el: '#root',data: {isHot: true},computed: {info () {return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather () {this.isHot = !this.isHot}},watch: {info: {handler (newValue, oldValue) {console.log('isHot被修改了')console.log(newValue, oldValue)}}}})

(5) immediate属性设置为true就是初始化的时候让handler调一下

 （6）监视属性的另外一种写法：通过调用vm.$watch函数实现监视,第一个参数是'isHot', 第二个参数传入的是一个对象，与在vm中声明watch配置项中的对象是一样的

        vm.$watch('isHot', {immediate: true,// 什么时候调用handler 当isHot被修改的时候handler (newValue, oldValue) {console.log('isHot被修改了')console.log(newValue, oldValue)}})

（7）深度监视

• Vue中的watch默认不监视对象内部值得改变，只监视一层
• 通过配置deep:true 可以检测对象内部值的改变，实现深度监视（多层监视）
• Vue自身可以检测对象内部值得改变，但是Vue提供的watch默认不可以
• 使用watch时，根据数据的具体结构，决定是否采用深度监视
• 如果不加deep：true的话，handler里面的逻辑是不会执行的

    <div id="root"><h3>a的值是{{numbers.a}}</h3><button @click="numbers.a++">点我让a+1</button><hr><h3>b的值是{{numbers.b}}</h3><button @click="numbers.b++">点我让b+1</button></div><script type="text/javascript">const vm = new Vue({el: '#root',data: {isHot: true,numbers: {a: 1,b: 1}},watch: {// 监视多级结构中某个属性的变化numbers: {// 开启深度监视deep: true,handler () {console.log('number改变了')}}}})</script>

（8）如果配置项中只需要handler的时候就可以简写

            watch: {// 简写: 配置项中只需要handler的时候就可以简写isHot (newValue, oldValue) {console.log('isHot被修改了', newValue, oldValue)}}// vm的写法  简写：只有handlervm.$watch('isHot', function (newValue, oldValue) {console.log('isHot被修改了', newValue, oldValue)})

三.监视属性和计算属性之间的关系

（1）计算属性computed能完成的功能，watch也能实现

（2）watch能实现的，computed不一定能实现，watch可以进行异步操作, computed靠的是返回值，没有办法实现异步任务， watch里面是直接通过手动修改

（3）两个小原则

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

    const vm = new Vue({el:'#root',data: {firstName:'张',lastName:'三',fullName:'张-三'},// 能开启异步任务watch: {firstName(val) {setTimeout(()=> {this.fullName = val + '-' + this.lastName}, 1000)},lastName(val) {this.fullName = this.firstName + '-' + val}}})