Vue响应式系统简介

南腔北调-pilmar

已于 2024-06-05 14:06:54 修改

阅读量891

点赞数 34

分类专栏： # Web前端开发基础文章标签： vue.js 前端 javascript

于 2024-06-05 10:53:07 首次发布

本文链接：https://blog.csdn.net/ningbw2000/article/details/139466096

版权

Vue.js的响应式系统基于观察者模式和依赖收集，通过Object.defineProperty实现数据追踪。使用ref()和reactive()声明响应式状态，数据变化时自动更新DOM。响应式状态的修改在预更新周期中缓存，确保组件只渲染一次。模板中直接使用ref对象，而reactive()创建的代理对象及其内部属性都具有响应性。

摘要由CSDN通过智能技术生成

Vue响应式系统

Vue.js 的响应式系统是其核心特性之一，它允许 Vue 跟踪数据的变化并在数据发生变化时自动更新 DOM。Vue 的响应式系统主要依赖于两个概念：观察者模式（Observer Pattern）和依赖收集（Dependency Collection）。

观察者模式trigger触发更新

Vue 实现了一种基于 ES5 特性（如 Object.defineProperty）的观察者模式。在这种模式中，每个数据对象（如选项API中的data函数返回的对象）都被转化为观察者对象。Vue 会在这些对象的属性上添加 getter 和 setter，从而能够追踪对这些属性的访问和修改。

tracker依赖收集

当渲染函数或计算属性被执行时，它们会访问响应式数据的属性，这时 Vue 会记录当前正在执行的渲染函数或计算属性作为依赖。这个过程称为依赖收集。一旦数据发生变化，Vue 会通知所有依赖于这个数据的渲染函数或计算属性，触发它们重新执行以反映最新的数据状态。

// 模拟ref响应式实现防抖功能
import {customRef} from 'vue'
export function debounceRef(value,delay=1000){
    let timer;
    return customRef((track,trigger)=>{  
        return{
             get(){
                 track();//依赖自动收集
                 return value;
              },
              set(val){