详细分析vue响应式原理_vue2响应式原理

5星 · 超过95%的资源 178 浏览量更新于2023-10-20 评论收藏 118KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详细分析详细分析vue响应式原理响应式原理

主要介绍了vue响应式原理的的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友

可以了解下

前言前言

响应式原理作为 Vue 的核心，使用数据劫持实现数据驱动视图。在面试中是经常考查的知识点，也是面试加分项。

本文将会循序渐进的解析响应式原理的工作流程，主要以下面结构进行：

1. 分析主要成员，了解它们有助于理解流程

2. 将流程拆分，理解其中的作用

3. 结合以上的点，理解整体流程

文章稍长，但大部分是代码实现，还请耐心观看。为了方便理解原理，文中的代码会进行简化，如果可以请对照源码学习。

主要成员主要成员

响应式原理中，Observe、Watcher、Dep这三个类是构成完整原理的主要成员。

Observe，响应式原理的入口，根据数据类型处理观测逻辑

Watcher，用于执行更新渲染，组件会拥有一个渲染Watcher，我们常说的收集依赖，就是收集 Watcher

Dep，依赖收集器，属性都会有一个Dep，方便发生变化时能够找到对应的依赖触发更新

下面来看看这些类的实现，包含哪些主要属性和方法。

Observe：我会对数据进行观测：我会对数据进行观测

温馨提示：代码里的序号对应代码块下面序号的讲解

// 源码位置：/src/core/observer/index.js

class Observe {

constructor(data) {

this.dep = new Dep()

// 1

def(data, '__ob__', this)

if (Array.isArray(data)) {

// 2

protoAugment(data, arrayMethods)

// 3

this.observeArray(data)

} else {

// 4

this.walk(data)

}

walk(data) {

Object.keys(data).forEach(key => {

defineReactive(data, key, data[key])

})

}

observeArray(data) {

data.forEach(item => {

observe(item)

})

}

1. 为观测的属性添加 __ob__ 属性，它的值等于 this，即当前 Observe 的实例

2. 为数组添加重写的数组方法，比如：push、unshift、splice 等方法，重写目的是在调用这些方法时，进行更新渲染

3. 观测数组内的数据，observe 内部会调用 new Observe，形成递归观测

4. 观测对象数据，defineReactive 为数据定义 get 和 set ，即数据劫持

Dep：我会为数据收集依赖：我会为数据收集依赖

// 源码位置：/src/core/observer/dep.js

let id = 0

class Dep{

constructor() {

this.id = ++id // dep 唯一标识

this.subs = [] // 存储 Watcher

}

// 1

depend() {

对于以上这些成员具有的功能，我们都有大概的了解。下面结合它们，来看看这些功能是如何在响应式原理流程中工作的。

数据观测数据观测

数据在初始化时会通过 observe 方法来创建 Observe 类

// 源码位置：/src/core/observer/index.js

export function observe(data) {

// 1

if (!isObject(data)) {

return

}

let ob;

// 2

if (data.hasOwnProperty('__ob__') && data.__ob__ instanceof Observe) {

ob = data.__ob__

} else {

// 3

ob = new Observe(data)

}

return ob

}

在初始化时，observe 拿到的 data 就是我们在 data 函数内返回的对象。

1. observe 函数只对 object 类型数据进行观测

2. 观测过的数据都会被添加上 __ob__ 属性，通过判断该属性是否存在，防止重复观测

3. 创建 Observe 类，开始处理观测逻辑

对象观测对象观测

进入 Observe 内部，由于初始化的数据是一个对象，所以会调用 walk 方法:

walk(data) {

Object.keys(data).forEach(key => {

defineReactive(data, key, data[key])

})

}

defineReactive 方法内部使用 Object.defineProperty 对数据进行劫持，是实现响应式原理最核心的地方。

function defineReactive(obj, key, value) {

// 1

let childOb = observe(value)

// 2

const dep = new Dep()

Object.defineProperty(obj, key, {

get() {

if (Dep.target) {

// 3

dep.depend()

if (childOb) {

childOb.dep.depend()

}

return value

set(newVal) {

if (newVal === value) {

return

}

value = newVal

// 4

childOb = observe(newVal)

// 5

dep.notify()

return value

}

})

}

1. 由于值可能是对象类型，这里需要调用 observe 进行递归观测

2. 这里的 dep 就是上面讲到的每一个属性都会有一个 dep，它是作为一个闭包的存在，负责收集依赖和通知更新

3. 在初始化时，Dep.target 是组件的渲染 watcher，这里 dep.depend 收集的依赖就是这个 watcher，childOb.dep.depend

主要是为数组收集依赖

4. 设置的新值可能是对象类型，需要对新值进行观测

5. 值发生改变，dep.notify 通知 watcher 更新，这是我们改变数据后能够实时更新页面的触发点

剩余12页未读，继续阅读

章满莫

2023-06-12

这篇文章以实际的例子讲解了vue的响应式机制，对于vue的学习非常有帮助。

冷月鱼

粉丝: 295
资源: 944

会员权益专享

详细分析vue响应式原理

评论10

会员权益专享

最新资源

详细分析vue响应式原理

评论10

用原生JS搞懂VUE的响应式原理，这篇文章就够了

【JavaScript源代码】vue响应式原理与双向数据的深入解析.docx

vue响应式核心原理手写源码

vue3的响应式原理和vue2响应式原理

vue2和vue3的响应式原理分析

vue3响应式原理解析

vue3 响应式原理解析

vue2响应式原理手写

vue3的响应式原理优势

vue2的响应式原理概括

vue3响应式源码分析

react响应式原理

reactive代理_vue3响应式系统源码解析-Reactive篇

vue2和vue3的底层原理

vue中mvvm原理

vue -router 实现原理

vue最简原理代码

白话说vue 底层原理

学习vue3推荐书籍

前端vue双向绑定的原理

会员权益专享

最新资源