浅谈Vue2.x响应式原理

我会带着你远行 2023-01-14 04:57 161阅读 0赞

### Vue响应式原理 ###

*  什么是响应式
 *  理解响应式
 *   *  Vue通过Object.defineProperty知道数据发生了改变
     *  Vue通过依赖收集去更新视图
     *  Vue通过依赖更新时去更新视图
 *  Vue响应式原理总结

# 什么是响应式 #

在 Vue 实例中声明过的数据，这些数据就是响应式的。什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。

# 理解响应式 #

Vue是如何追踪变化得呢，那么我们就要弄懂以下三个问题：

*  Vue是怎么知道数据发生了改变？
 *  Vue是怎么知道去更新哪些视图？
 *  Vue是怎么知道在什么时间更新视图？  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]

## Vue通过Object.defineProperty知道数据发生了改变 ##

Object.defineProperty是 Vue 响应式系统的精髓；Vue使用 Object.defineProperty 为对象中的每一个属性，设置 get 和 set 方法，进行数据劫持/监听；get 值是一个函数,当属性被访问时，会触发 get 函数，set 值同样是一个函数，当属性被赋值时，会触发 set 函数；

var obj={    
        name:Vue是响应式吗？
    }
    
    Object.defineProperty(obj,"name",{
        get(){        
            console.log("get方法被触发")
        },
        set(val){        
            console.log("set方法被触发")
        }
    })
    
    var str = obj.name  //get方法被触发
    obj.name = "Vue是响应式的"  // set方法被触发

因而当数据改变时，触发 属性的 set 方法，Vue 就能知道数据有改变；

## Vue通过依赖收集去更新视图 ##

data 中每个声明的属性都会有一个专属的依赖收集器dep.subs数组，当页面使用到 某个属性时，触发 ObjectdefineProperty - get函数，页面的 watcher 就会被放到属性的依赖收集器 subs 中进行保存。它知道谁依赖它之后，它就可以在发生改变的时候，通知 依赖它的页面，从而让页面完成更新；

<template>
         <p> Vue是响应式吗?</p>
          //此节点是name的订阅者watch，vue也把此节点存在name的依赖收集器；
        <p>{
       {name}}</p>  
    </template>
    
    <script>
       export default{
         data(){
           name:"Vue是响应式的"
         }
        mounted(){
         //当数据发生改变时，vue会遍历观察者列表（dep.subs），通知所有的watch，
           让订阅者执行自己的update逻辑,去让页面完成更新
          this.name ="Vue必须是响应式的" 
        }
      }
    </script>

![在这里插入图片描述][20210420102636264.png]

## Vue通过依赖更新时去更新视图 ##

依赖更新，就是，通知所有的依赖进行更新；  
我们都知道，每个属性都会保存有一个 依赖收集器 subs ，而这个 依赖收集器，是用来在 数据变化时，通知更新的；  
关键在于Object.defineProperty - set，当 name 改变的时候，name 会遍历自己的 依赖收集器 subs，逐个通知 订阅者watcher，让 订阅者watcher 完成更新；这里 name 会通知 订阅者节点，节点重新读取新的 name ，然后完成渲染；

# Vue响应式原理总结 #

*  Object.defineProperty - get ，用于 依赖收集
 *  Object.defineProperty - set，用于 依赖更新
 *  每个 data 声明的属性，都拥有一个的专属依赖收集器 subs
 *  依赖收集器 subs 保存的依赖是 watcher
 *  watcher可用于 进行视图更新

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/4af218b359c44a3d9ae5659f28bd4ef2.png
[20210420102636264.png]: /images/20221022/deb2b2c87c75463e86ef19312f6fe956.png