【Vue】深究计算和侦听属性的原理

hello，我是小索奇，精心制作的Vue系列教程持续更新哈，涵盖大量的经验和示例，由浅入深进行讲解，想要学习&巩固&避坑就一起学习吧~

计算和侦听属性

计算属性

重点概要

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

原理：底层借助了Objcet.defineproperty()方法提供的getter和setter来计算属性计算属性会自动找到getter并调用，拿到返回值放到VM身上

关于get函数

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

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

• 与methods实现相比，内部有缓存机制，当我们再次调用get时，直接走缓存了，效率更高，调试时也直接显示computed

那么我们需要改值的时候呢？

• 计算属性最终会出现在VM上，利用this进行读取使用即可

• 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

• 如果计算属性确定不考虑修改，可以使用计算属性的简写形式

代码案例

    
    
         


         


        
{{name}}
    

   

image-20230819013138164

    
    
             


          


            
{{name}}
    

   

计算属性简写

• 在实际应用过程中计算属性一般是仅读取展示，不修改的

• 当你确定只读不更改，那么才可以用简写函数

执行流程：执行完name函数，往VM身上放name这个属性，它的值是函数返回的结果

 computed:{
          name(){
             console.log('简写形式，等同于get ')
             return this.firstName + '-' + this.lastName
           }, 
         }

调用时用name即可不用加括号name()-> x

拓展

还可以方法调用，为什么不用呢？看下例

    
    
    
    


    
    
         


        


         
            
{{name()}}
        
    

   

为什么不用？

因为这样更新频率极高，每一次更改值都会重新调用方法解析模板；效率低下

侦听属性

• 侦听属性称为监视属性也是一样的

在Vue.js中，侦听属性通常是通过"监视器"（Watchers）来实现的监视器允许你在Vue实例中监听一个特定的数据属性，然后在属性值发生变化时执行相应的逻辑这可以用来在属性变化时执行异步操作、更新其他数据，或者触发其他行为

当被监视的属性变化时，回调函数自动调用

侦听属性的定义方式有两种：声明式和编程式下面详细解释这两种方式以及如何使用侦听属性：

1. 侦听属性：

用watch选项来对一个或多个侦听属性每个侦听属性都对应一个属性名，以及一个处理函数，当这个属性发生变化时，处理函数会被触发

  
    
今天天气很{{ info }}
    切换天气
  

  Vue.config.productionTip = false;   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(newValue,oldValue){    console.log('isHot被修改了',newValue,oldValue)     }    }   } 

2. 侦听属性：

还可以通过$watch方法在Vue实例中编程式地设置侦听属性 ，调用VM的方法$watch

  vm.$watch('isHot', {
  // 初始化立即执行handler
    immediate: true,
    // 同理，都能接受新旧值进行处理
    handler(newValue, oldValue) {
      console.log('isHot被修改了', newValue, oldValue);
    },
  });

无论是声明式还是编程式的侦听属性，你都可以在侦听属性的处理函数中执行任何你需要的操作，比如发起网络请求、更新其他数据属性、触发方法等

需要注意的是，尽管侦听属性是强大的工具，但过多的侦听属性可能会导致代码变得复杂且难以维护在一些情况下，你可以使用计算属性（Computed Properties）来取代侦听属性，以提高代码的可读性和性能

使用watch选项或$watch方法都可以设置侦听属性，从而在属性变化时触发处理函数

深度监视

简单概括就是，深度监视是指对一个对象的所有嵌套属性进行观察和监听

1. 使用方法：在 watch 选项中，为要监视的对象设置 deep: true

2. 工作原理：当设置为 deep: true 时，Vue 会递归地遍历对象的所有子属性，确保无论如何修改对象的任何嵌套属性，都会触发回调函数

3. 注意事项：因为深度监视需要递归地监听对象的所有子属性，所以它可能会对性能产生影响，特别是当对象结构复杂、嵌套层次深时

4. 使用场景：当你需要响应对象内部属性的变化，而不仅仅是对象本身的引用变化时，使用深度监视

一个小案例

   
  
   
今天天气很{{info}}
   切换天气
   

   
a的值是:{{numbers.a}}
   点我让a+1
   
b的值是:{{numbers.b}}
   点我让b+1
   改变numbers对象
   {{numbers.c.d.e}}