Vue2 第四节 计算属性，监视属性

1.计算属性

2.监视属性

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

一.计算属性

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

   
           姓:
   
   
           名:
   
   
           全名:{{fullName}}
       
      

    二. 监视属性

   （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里面的逻辑是不会执行的

       
   
           
   a的值是{{numbers.a}}
           点我让a+1
           
   
           
   b的值是{{numbers.b}}
           点我让b+1
       
       

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

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