Vue原理1.2 ——响应式及视图更新

最新推荐文章于 2025-04-02 15:04:28 发布

金憨憨_

最新推荐文章于 2025-04-02 15:04:28 发布

阅读量396

点赞数

CC 4.0 BY-SA版权

分类专栏： #vue原理 vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_40573810/article/details/120077118

本文深入探讨Vue.js的响应式系统，讲解如何通过Object.defineProperty实现响应式和依赖收集。当数据改变时，setter触发更新，Watcher对象更新视图。同时介绍了Virtual DOM的概念，它是JavaScript对象的抽象，用于跨平台的DOM操作。更新视图过程中，patch算法通过diff找出差异，高效地修改真实DOM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 注：以下资料出自掘金小册《剖析 Vue.js 内部运行机制》 加上自己的理解以及对部分词汇的注解

响应式

当使用new Vue()进行初始化的时候，最为重要的是会通过Object.defineProperty来设置setter与getter函数，来实现【响应式】和【依赖收集】。

关于Object.definePropetry介绍
1、语法
Object.defineProperty(obj, prop, descriptor)
2、参数
obj 要定义属性的对象。
prop 要定义或修改的属性的名称或 Symbol 。
descriptor 要定义或修改的属性描述符。

关于descriptor(描述) 
	该方法允许精确地添加或修改对象的属性。
	对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。
	数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。
	存取描述符是由 getter 函数和 setter 函数所描述的属性。
	一个描述符只能是这两者其中之一；不能同时是两者。

它的主要键值：