devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue核心 — Vue2响应式原理和核心源码解析（核心中的核心）_vue2 源码响应是

作者：笔触狂放9 | 2024-07-14 22:16:37

赞

踩

vue2 源码响应是

一、前置知识

1、Vue 核心概念

Vue 是什么?

        Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

Vue 核心特点是什么?

响应式数据绑定:

        Vue.js 实现了数据的双向绑定，即当数据发生变化时，视图会自动更新，反之亦然。这使得开发者可以更轻松地管理和更新数据，同时保持视图与数据的同步。

组件化开发：

       Vue.js  将页面拆分为多个独立的组件，每个组件负责自己的视图和逻辑。这种组件化的开发方式使得代码更加模块化、可维护性更高，也有利于团队协作。

虚拟 Dom：

        Vue.js 使用虚拟 DOM 技术，将页面的 DOM 结构表示为 JavaScript 对象，通过比较新旧虚拟 DOM 树的差异，最小化 DOM 操作，从而提高页面的性能和效率。

指令：

        Vue.js 提供了丰富的指令、用于在模板中添加特定的功能或行为。指令使得开发者可以更便捷地操作 DOM 元素，实现动态数据绑定、条件渲染等功能。

插件系统：

        Vue.js 提供了灵活的插件系统，允许开发者根据项目需求扩展 Vue 的功能

二、Vue2 的响应式原理

1、理解什么是响应式数据?

什么不是响应式数据？

数据和视图(dom属性值)相互独立、互相并不影响、即数据发生变化视图并不发生变化、视图发送变化数据并不发生变化、想要实现双向绑定、得在一方的值发生变化时去修改另一方的值。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>测试响应式</title>
  7. </head>
  8. <body>
  9.   <input type="text">
  10.   <button>value++</button>
  11.   <script>
  12.     // 设置 value 初始值
  13.     let value = 1
  14.     // 读取输入框 dom 元素
  15.     const ipt = document.querySelector('input')
  16.     // 按钮 dom 元素
  17.     const btn = document.querySelector('button')
  18.  
  19.     // 设置 ipt 的 value 值为 value
  20.     ipt.value = value
  21.  
  22.     // 为输入框绑定输入事件
  23.     ipt.addEventListener('input', (event) => {
  24.       console.log('iptValue: ', event.target.value);
  25.       console.log('value ', value);;
  26.       // 重新为 value 赋值
  27.       // value = event.target.value
  28.     })
  29.     
  30.     // 为按钮绑定点击事件
  31.     btn.addEventListener('click', (event) => {
  32.       value++
  33.       // 重新为 ipt.value 赋值
  34.       // ipt.value = ipt.value
  35.       console.log('iptValue: ',ipt.value)
  36.       console.log('value ', value);
  37.     })
  38.   </script>
  39. </body>
  40.  
  41. </html>

什么是响应式数据?

数据发生变化、视图绑定该数据会自动更新、反之亦然。详细说明、例如页面上的表单元素通过v-model: value 绑定 data 方法里返回的对象属性值 value、当 value 值发送变化时视图会自动更新、在页面上修改表单元素时(修改value值)、data 方法里返回的对象属性值 value 也会同步变化。

为什么数据发送变化视图也会更新呢、底层源码是如何实现的?

如上图所示、这就是响应式对象发送变化时视图发送变化的机制。让我们一步一步的来剖析。

2、Vue 初始化做了什么？（重点关注状态初始化）

  1.  
  2. new Vue({
  3.   render: h => h(App)
  4. }).$mount('#app')

        上面代码大家都很熟悉、简单来讲就是通过new Vue({render: h => h(App)}) 创建一个 Vue 实例、render: h => h(App) 就是一个指令，告诉 Vue 使用 createElement 函数来创建 App 组件的虚拟 DOM 对象,然后将实例通过其内置的 $mount 方法挂载到 id 为 app 根节点上。

        从 new 操作符、咱们可以看出 Vue 其实就是一个构造函数、没啥特别的、传入的参数就是一个对象、源码中我们叫做 options（选项）。

让我们来看看构造函数做了什么?

  1. import { initMixin } from './init'
  2. import { stateMixin } from './state'
  3. import { renderMixin } from './render'
  4. import { eventsMixin } from './events'
  5. import { lifecycleMixin } from './lifecycle'
  6. import { warn } from '../util/index'
  7. import type { GlobalAPI } from 'types/global-api'
  8.  
  9. function Vue(options) {
  10.   if (__DEV__ && !(this instanceof Vue)) {
  11.     warn('Vue is a constructor and should be called with the `new` keyword')
  12.   }
  13.   this._init(options)
  14. }
  15.  
  16. //@ts-expect-error Vue has function type
  17. initMixin(Vue)
  18. //@ts-expect-error Vue has function type
  19. stateMixin(Vue)
  20. //@ts-expect-error Vue has function type
  21. eventsMixin(Vue)
  22. //@ts-expect-error Vue has function type
  23. lifecycleMixin(Vue)
  24. //@ts-expect-error Vue has function type
  25. renderMixin(Vue)
  26.  
  27. export default Vue as unknown as GlobalAPI

很明显、核心在于调用了方法 this._init(options) 这里开始进行 Vue 实例的初始化工作

options 就是传入的虚拟 dom 对象。

那么 _init() 方法是从哪里来的呢? _init() 方法内部干了什么?

核心关注 initMixin(Vue)

_init()这个方法就是 initMixin(Vue) 在 vue 实例的原型上挂载的。

  1. export function initMixin(Vue: typeof Component) {
  2.   Vue.prototype._init = function (options?: Record<string, any>) {
  3.     const vm: Component = this
  4.     // a uid
  5.     vm._uid = uid++
  6.  
  7.     let startTag, endTag
  8.     /* istanbul ignore if */
  9.     if (__DEV__ && config.performance && mark) {
  10.       startTag = `vue-perf-start:${vm._uid}`
  11.       endTag = `vue-perf-end:${vm._uid}`
  12.       mark(startTag)
  13.     }
  14.  
  15.     // a flag to mark this as a Vue instance without having to do instanceof
  16.     // check
  17.     vm._isVue = true
  18.     // avoid instances from being observed
  19.     vm.__v_skip = true
  20.     // effect scope
  21.     vm._scope = new EffectScope(true /* detached */)
  22.     // #13134 edge case where a child component is manually created during the
  23.     // render of a parent component
  24.     vm._scope.parent = undefined
  25.     vm._scope._vm = true
  26.     // merge options
  27.     if (options && options._isComponent) {
  28.       // optimize internal component instantiation
  29.       // since dynamic options merging is pretty slow, and none of the
  30.       // internal component options needs special treatment.
  31.       initInternalComponent(vm, options as any)
  32.     } else {
  33.       vm.$options = mergeOptions(
  34.         resolveConstructorOptions(vm.constructor as any),
  35.         options || {},
  36.         vm
  37.       )
  38.     }
  39.     /* istanbul ignore else */
  40.     if (__DEV__) {
  41.       initProxy(vm)
  42.     } else {
  43.       vm._renderProxy = vm
  44.     }
  45.     // expose real self
  46.     vm._self = vm
  47.     initLifecycle(vm)
  48.     initEvents(vm)
  49.     initRender(vm)
  50.     callHook(vm, 'beforeCreate', undefined, false /* setContext */)
  51.     initInjections(vm) // resolve injections before data/props
  52.     initState(vm)
  53.     initProvide(vm) // resolve provide after data/props
  54.     callHook(vm, 'created')
  55.  
  56.     /* istanbul ignore if */
  57.     if (__DEV__ && config.performance && mark) {
  58.       vm._name = formatComponentName(vm, false)
  59.       mark(endTag)
  60.       measure(`vue ${vm._name} init`, startTag, endTag)
  61.     }
  62.  
  63.     if (vm.$options.el) {
  64.       vm.$mount(vm.$options.el)
  65.     }
  66.   }
  67. }

让我们来关注几个核心点

(1) Vue 组件实例的选项 (vm.$options)初始化。

如果是内部组件：通过 initInternalComponent 函数 优化初始化

如果是非内部组件：通过 mergeOptions 函数 合并传入的 options 对象和 当前 Vue 实例成为最终的 $options 对象

  1. if (options && options._isComponent) {
  2.       // optimize internal component instantiation
  3.       // since dynamic options merging is pretty slow, and none of the
  4.       // internal component options needs special treatment.
  5.       initInternalComponent(vm, options as any)
  6.     } else {
  7.       vm.$options = mergeOptions(
  8.         resolveConstructorOptions(vm.constructor as any),
  9.         options || {},
  10.         vm
  11.       )
  12.     }

(2) 生命周期、事件、渲染初始化:

  1. // 生命周期初始化
  2. initLifecycle(vm)
  3. // 事件初始化
  4. initEvents(vm)
  5. // 渲染初始化
  6. initRender(vm)

(3) 状态初始化(核心重点):

initState(vm)
initState 干了什么?
  1. export function initState(vm: Component) {
  2.   const opts = vm.$options
  3.   if (opts.props) initProps(vm, opts.props)
  4.  
  5.   // Composition API
  6.   initSetup(vm)
  7.  
  8.   if (opts.methods) initMethods(vm, opts.methods)
  9.   if (opts.data) {
  10.     initData(vm)
  11.   } else {
  12.     const ob = observe((vm._data = {}))
  13.     ob && ob.vmCount++
  14.   }
  15.   if (opts.computed) initComputed(vm, opts.computed)
  16.   if (opts.watch && opts.watch !== nativeWatch) {
  17.     initWatch(vm, opts.watch)
  18.   }
  19. }

可以看到依次初始化了

props > setup > methods > data > computed > watch

想要弄清楚 Vue2 的响应式原理重点得关注初始化 data 上

  1. if (opts.data) {
  2.   initData(vm)
  3. } else {
  4.   const ob = observe((vm._data = {}))
  5.   ob && ob.vmCount++
  6. }

如果组件定义了 data，则直接调用 initData(vm) 来初始化；如果没有定义 data，则创建一个空对象，并将其转换为响应式对象。

  1. function initData(vm: Component) {
  2.   let data: any = vm.$options.data;
  3.   // 获取组件配置中的 data 选项
  4.   data = vm._data = isFunction(data) ? getData(data, vm) : data || {};
  5.   // 如果 data 是一个函数，则通过 getData 函数获取其返回值，否则直接使用 data 或者默认为空对象 {}
  6.  
  7.   if (!isPlainObject(data)) {
  8.     // 如果 data 不是一个纯对象，给出开发者警告（开发环境下）
  9.     data = {};
  10.     __DEV__ &&
  11.       warn(
  12.         'data functions should return an object:\n' +
  13.           'https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
  14.         vm
  15.       );
  16.   }
  17.  
  18.   // proxy data on instance
  19.   const keys = Object.keys(data);
  20.   const props = vm.$options.props;
  21.   const methods = vm.$options.methods;
  22.   let i = keys.length;
  23.   // 遍历 data 的键，将每个键设置为 vm 实例的代理属性（如果不是保留键）
  24.  
  25.   while (i--) {
  26.     const key = keys[i];
  27.     if (__DEV__) {
  28.       // 在开发环境下，检查是否有同名方法已经定义为数据属性
  29.       if (methods && hasOwn(methods, key)) {
  30.         warn(`Method "${key}" has already been defined as a data property.`, vm);
  31.       }
  32.     }
  33.     if (props && hasOwn(props, key)) {
  34.       // 如果 data 的属性已经被声明为 prop，给出警告
  35.       __DEV__ &&
  36.         warn(
  37.           `The data property "${key}" is already declared as a prop. ` +
  38.             `Use prop default value instead.`,
  39.           vm
  40.         );
  41.     } else if (!isReserved(key)) {
  42.       // 如果属性不是保留属性，则将其代理到 vm 实例上
  43.       proxy(vm, `_data`, key);
  44.     }
  45.   }
  46.  
  47.   // observe data
  48.   // 观察数据，确保数据变化时可以通知相关的依赖
  49.   const ob = observe(data);
  50.   if (ob) {
  51.     // 如果成功创建了观察对象，则增加其引用计数
  52.     ob.vmCount++;
  53.   }

可以看到无论如何都会执行 observe(data) 、就是其让data数据变成响应式数据的。

observe 干了什么?
  1. /**
  2.  * 尝试为一个值创建观察者实例，
  3.  * 如果成功观察，则返回新的观察者实例，
  4.  * 如果值已经有观察者实例，则返回现有的观察者。
  5.  *
  6.  * @param value 需要观察的值。
  7.  * @param shallow 是否执行浅层观察。
  8.  * @param ssrMockReactivity 是否在服务端渲染时模拟响应性。
  9.  * @returns 如果成功观察到，则返回 Observer 实例，否则返回 void。
  10.  */
  11. export function observe(
  12.   value: any,
  13.   shallow?: boolean,
  14.   ssrMockReactivity?: boolean
  15. ): Observer | void {
  16.   // 检查值是否已经有 __ob__ 属性，并且该属性是 Observer 的实例
  17.   if (value && hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
  18.     return value.__ob__; // 返回现有的观察者实例
  19.   }
  20.  
  21.   // 创建新的观察者实例的条件判断
  22.   if (
  23.     shouldObserve && // 全局标志，确定是否进行观察
  24.     (ssrMockReactivity || !isServerRendering()) && // 确保在非服务端渲染时或者模拟响应性时启用响应性
  25.     (isArray(value) || isPlainObject(value)) && // 值必须是数组或普通对象
  26.     Object.isExtensible(value) && // 值必须是可扩展的（即未被密封）
  27.     !value.__v_skip /* ReactiveFlags.SKIP */ && // 值不能被标记为跳过观察
  28.     !isRef(value) && // 值不能是 ref 对象
  29.     !(value instanceof VNode) // 值不能是 Vue 虚拟节点
  30.   ) {
  31.     // 创建一个新的 Observer 实例来观察该值
  32.     return new Observer(value, shallow, ssrMockReactivity);
  33.   }
  34.  
  35.   // 如果不满足观察条件，则返回 void
  36. }

初始化传进来的 vm._data  满足上述条件、所以会执行

return new Observer(value, shallow, ssrMockReactivity);

Observer 里干了什么?

核心: 是将传入的 data 对象（或数组）转换为响应式对象（或响应式数组）

  1. /**
  2.  * Observer 类被附加到每个被观察的对象上。
  3.  * 一旦附加，Observer 将目标对象的属性键转换为 getter 和 setter，
  4.  * 用于收集依赖和分发更新。
  5.  */
  6. export class Observer {
  7.   dep: Dep; // 依赖管理对象
  8.   vmCount: number; // 使用该对象作为根 $data 的 vm 数量
  9.  
  10.   constructor(public value: any, public shallow = false, public mock = false) {
  11.     // 初始化 Observer 实例
  12.     this.dep = mock ? mockDep : new Dep(); // 创建依赖管理对象 Dep
  13.     this.vmCount = 0; // 记录有多少个 vm 实例使用该对象作为根 $data
  14.  
  15.     // 在值 value 上定义 __ob__ 属性，指向当前 Observer 实例
  16.     def(value, '__ob__', this);
  17.  
  18.     // 如果值是数组
  19.     if (isArray(value)) {
  20.       if (!mock) {
  21.         if (hasProto) {
  22.           /* eslint-disable no-proto */
  23.           // 如果支持原型链修改，则将数组的原型指向 arrayMethods
  24.           ;(value as any).__proto__ = arrayMethods;
  25.           /* eslint-enable no-proto */
  26.         } else {
  27.           // 否则，逐个定义数组的方法
  28.           for (let i = 0, l = arrayKeys.length; i < l; i++) {
  29.             const key = arrayKeys[i];
  30.             def(value, key, arrayMethods[key]);
  31.           }
  32.         }
  33.       }
  34.  
  35.       // 如果不是浅层观察，则递归观察数组中的每一项
  36.       if (!shallow) {
  37.         this.observeArray(value);
  38.       }
  39.     } else { // 如果值是普通对象
  40.       // 遍历对象的所有属性，转换为 getter/setter
  41.       const keys = Object.keys(value);
  42.       for (let i = 0; i < keys.length; i++) {
  43.         const key = keys[i];
  44.         defineReactive(value, key, NO_INITIAL_VALUE, undefined, shallow, mock);
  45.       }
  46.     }
  47.   }
  48.  
  49.   /**
  50.    * 观察数组中的每一项。
  51.    */
  52.   observeArray(value: any[]) {
  53.     for (let i = 0, l = value.length; i < l; i++) {
  54.       observe(value[i], false, this.mock);
  55.     }
  56.   }
  57. }

def(value, key, arrayMethods[key])：将数组数据变成响应式数据核心方法。

defineReactive(value, key, NO_INITIAL_VALUE, undefined, shallow, mock)：将对象数据转化成响应式数据核心方法。

defineReactive 干了什么?

        将一个对象的属性变成响应式，即当属性被访问或修改时能触发相应的依赖收集和通知更新操作。核心方法就是 Object.defineProperty()

  1. /**
  2.  * 在对象上定义一个响应式属性。
  3.  * @param obj 要定义属性的对象。
  4.  * @param key 要定义的属性的名称。
  5.  * @param val 可选，属性的初始值。
  6.  * @param customSetter 可选，自定义的 setter 函数。
  7.  * @param shallow 可选，是否进行浅层观察。
  8.  * @param mock 可选，是否模拟对象。
  9.  * @param observeEvenIfShallow 默认为 false，即使是浅层观察也进行观察。
  10.  */
  11. export function defineReactive(
  12.   obj: object,
  13.   key: string,
  14.   val?: any,
  15.   customSetter?: Function | null,
  16.   shallow?: boolean,
  17.   mock?: boolean,
  18.   observeEvenIfShallow = false
  19. ) {
  20.   const dep = new Dep(); // 创建一个依赖对象
  21.  
  22.   const property = Object.getOwnPropertyDescriptor(obj, key);
  23.   if (property && property.configurable === false) {
  24.     return; // 如果属性已存在且不可配置，直接返回
  25.   }
  26.  
  27.   // 处理预定义的 getter 和 setter
  28.   const getter = property && property.get;
  29.   const setter = property && property.set;
  30.   if ((!getter || setter) && (val === NO_INITIAL_VALUE || arguments.length === 2)) {
  31.     val = obj[key]; // 获取属性的初始值
  32.   }
  33.  
  34.   // 观察子对象，决定是否进行深层观察
  35.   let childOb = shallow ? val && val.__ob__ : observe(val, false, mock);
  36.   
  37.   // 定义属性的 getter 和 setter
  38.   Object.defineProperty(obj, key, {
  39.     enumerable: true,
  40.     configurable: true,
  41.     get: function reactiveGetter() {
  42.       const value = getter ? getter.call(obj) : val; // 获取属性值
  43.       if (Dep.target) {
  44.         if (__DEV__) {
  45.           dep.depend({
  46.             target: obj,
  47.             type: TrackOpTypes.GET,
  48.             key
  49.           }); // 进行依赖收集
  50.         } else {
  51.           dep.depend();
  52.         }
  53.         if (childOb) {
  54.           childOb.dep.depend(); // 子对象依赖收集
  55.           if (isArray(value)) {
  56.             dependArray(value); // 数组依赖收集
  57.           }
  58.         }
  59.       }
  60.       return isRef(value) && !shallow ? value.value : value; // 如果是 ref 类型且不是浅层观察，返回其值
  61.     },
  62.     set: function reactiveSetter(newVal) {
  63.       const value = getter ? getter.call(obj) : val; // 获取属性当前值
  64.       if (!hasChanged(value, newVal)) {
  65.         return; // 新旧值相同则直接返回
  66.       }
  67.       if (__DEV__ && customSetter) {
  68.         customSetter(); // 在开发环境下调用自定义的 setter 函数
  69.       }
  70.       if (setter) {
  71.         setter.call(obj, newVal); // 使用属性的原始 setter 函数
  72.       } else if (getter) {
  73.         // 如果属性是 accessor 类型但没有 setter
  74.         return;
  75.       } else if (!shallow && isRef(value) && !isRef(newVal)) {
  76.         value.value = newVal; // 处理 ref 类型属性的赋值
  77.         return;
  78.       } else {
  79.         val = newVal; // 更新属性值
  80.       }
  81.       childOb = shallow ? newVal && newVal.__ob__ : observe(newVal, false, mock); // 更新子对象的观察状态
  82.       if (__DEV__) {
  83.         dep.notify({
  84.           type: TriggerOpTypes.SET,
  85.           target: obj,
  86.           key,
  87.           newValue: newVal,
  88.           oldValue: value
  89.         }); // 发送属性变更通知
  90.       } else {
  91.         dep.notify();
  92.       }
  93.     }
  94.   });
  95.  
  96.   return dep; // 返回依赖对象
  97. }
Object.defineProperty() 干了什么
首先得知道 Object.defineProperty() 是什么?
Obeject.defineProperty() 概念

        Obeject.defineProperty 是一个用于定义或修改对象属性的方法。它允许你精确地控制属性的特性，包括可写性、可枚举性、可配置性以及访问器方法（getter 和 setter）。

使用语法
Object.defineProperty(obj, 'age',descriptor);
  • obj: 要在其上定义属性的对象。
  • prop: 要定义或修改的属性的名称或 Symbol。
  • descriptor: 描述符对象，定义了要定义或修改的属性的特性。
描述符对象（descriptor）

  1. value: 设置属性的值（仅适用于数据属性）。默认为 undefined。不能与 get 或 set 同时使用。

  2. writable: 值是否可写。默认为 false。如果为 true，则属性的值可以被赋值运算符改变。

  3. enumerable: 属性是否可以被枚举。默认为 false。如果为 true，则属性可以在 for...in 循环和 Object.keys 方法中被枚举。

  4. configurable: 属性是否可以被删除或修改特性。默认为 false。如果为 true，则可以使用 Object.defineProperty 修改该属性的特性，或者使用 delete 删除该属性。

  5. get: 属性的 getter 函数，当访问该属性时调用。不能与 value 或 writable 同时使用。

  6. set: 属性的 setter 函数，当属性被赋值时调用。不能与 value 或 writable 同时使用。

注意事项
  • 在非严格模式下，如果尝试写入一个不可写属性，赋值操作将会静默失败。
  • 不能同时在同一个属性描述符对象中使用 value 和 get 或 set。
  • 一旦将属性设置为不可配置 (configurable: false)，则不能再修改其特性，也不能删除该属性。
代码示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>测试代码执行顺序</title>
  7. </head>
  8. <body>
  9.   <script>
  10.     // 定义数据属性
  11.     let objOne = {};
  12.     Object.defineProperty(objOne, 'myProperty', {
  13.       value: 42,
  14.       writable: true,
  15.       enumerable: true,
  16.       configurable: true
  17.     });
  18.     console.log(objOne.myProperty); // 输出: 42
  19.     objOne.myProperty = 50;
  20.     console.log(objOne.myProperty); // 输出: 50
  21.  
  22.     // 定义访问器属性 
  23.     let objTwo = {
  24.       _myProperty: 0
  25.     };
  26.     Object.defineProperty(objTwo, 'myProperty', {
  27.       get: function() {
  28.         console.log('获取值');
  29.         return this._myProperty;
  30.       },
  31.       set: function(value) {
  32.         if(value ===  this._myProperty) {
  33.           return
  34.         }
  35.         console.log('设置值');
  36.         this._myProperty = value;
  37.       },
  38.       enumerable: true,
  39.       configurable: true
  40.     });
  41.     // 设置属性值 myProperty 就是在调用 set 方法
  42.     objTwo.myProperty = 10;
  43.     // 访问属性值 myProperty 就是在调用 get 方法
  44.     console.log(objTwo.myProperty); // 输出: 10
  45.   </script>
  46. </body>
  47. </html>

源码中的 Object.defineProperty（）干了什么？

  1. javascript
  2. Object.defineProperty(obj, key, {
  3.   enumerable: true,        // 可枚举
  4.   configurable: true,      // 可配置
  5.   get: function reactiveGetter() {
  6.     const value = getter ? getter.call(obj) : val;  // 获取属性值
  7.     if (Dep.target) {  // 如果存在正在依赖此属性的 Watcher
  8.       if (__DEV__) {
  9.         // 在开发模式下进行依赖收集
  10.         dep.depend({
  11.           target: obj,
  12.           type: TrackOpTypes.GET,
  13.           key
  14.         });
  15.       } else {
  16.         dep.depend();  // 正常情况下进行依赖收集
  17.       }
  18.       if (childOb) {
  19.         childOb.dep.depend();  // 如果存在子响应式对象，也进行依赖收集
  20.         if (isArray(value)) {
  21.           dependArray(value);  // 如果值是数组，还需依赖收集数组的元素
  22.         }
  23.       }
  24.     }
  25.     // 如果值是 Ref 对象且不是浅层响应式，则返回其实际值；否则返回原始值
  26.     return isRef(value) && !shallow ? value.value : value;
  27.   },
  28.   set: function reactiveSetter(newVal) {
  29.     const value = getter ? getter.call(obj) : val;  // 获取当前属性值
  30.     if (!hasChanged(value, newVal)) {
  31.       return;  // 如果新旧值相同，则不进行更新
  32.     }
  33.     if (__DEV__ && customSetter) {
  34.       customSetter();  // 在开发模式下，如果定义了自定义 setter，则调用它
  35.     }
  36.     if (setter) {
  37.       setter.call(obj, newVal);  // 如果定义了 setter 函数，则调用它设置新值
  38.     } else if (getter) {
  39.       // 如果只定义了 getter 函数但未定义 setter，不执行任何操作（适用于只读属性）
  40.       return;
  41.     } else if (!shallow && isRef(value) && !isRef(newVal)) {
  42.       value.value = newVal;  // 如果属性值是 Ref 对象且不是浅层响应式，则设置其值
  43.       return;
  44.     } else {
  45.       val = newVal;  // 否则直接更新属性的值
  46.     }
  47.     // 更新子响应式对象的依赖关系
  48.     childOb = shallow ? newVal && newVal.__ob__ : observe(newVal, false, mock);
  49.     if (__DEV__) {
  50.       // 在开发模式下，通知依赖此属性的 Watcher 进行更新
  51.       dep.notify({
  52.         type: TriggerOpTypes.SET,
  53.         target: obj,
  54.         key,
  55.         newValue: newVal,
  56.         oldValue: value
  57.       });
  58.     } else {
  59.       dep.notify();  // 正常情况下通知依赖进行更新
  60.     }
  61.   }
  62. });
get和set核心就是调用dep的两个方法depend()和notify()

dep核心就是调用Watcher的两个方法get()和update()

  1. // 定义一个 Dep 类，用于管理依赖和通知更新（演示非源码）
  2.  
  3. export default class Dep {
  4.   constructor() {
  5.     this.subs = []; // subs 数组用来存储 Watcher 对象
  6.   }
  7.  
  8.   // 添加 Watcher 对象到 subs 数组
  9.   addSub(sub) {
  10.     this.subs.push(sub);
  11.   }
  12.  
  13.   // 从 subs 数组移除指定的 Watcher 对象
  14.   removeSub(sub) {
  15.     remove(this.subs, sub); // 使用 remove 函数移除
  16.   }
  17.  
  18.   // 当前 Dep 对象收集依赖
  19.   depend() {
  20.     if (Dep.target) {
  21.       Dep.target.addDep(this); // 将当前 Dep 对象添加到 Watcher 的依赖列表中
  22.     }
  23.   }
  24.  
  25.   // 通知所有依赖于该 Dep 对象的 Watcher 执行更新操作
  26.   notify() {
  27.     // 遍历 subs 数组，调用每个 Watcher 的 update 方法
  28.     const subs = this.subs.slice(); // 使用 slice() 创建副本，避免在遍历过程中被修改
  29.     for (let i = 0, l = subs.length; i < l; i++) {
  30.       subs[i].update(); // 调用 Watcher 的 update 方法
  31.     }
  32.   }
  33. }
  34.  
  35. Dep.target = null; // 静态属性，用来存储当前正在执行的 Watcher 对象
  36. const targetStack = []; // Watcher 栈，用于处理嵌套依赖
  37.  
  38. // 将指定的 Watcher 对象推入 Watcher 栈中
  39. export function pushTarget(target) {
  40.   if (Dep.target) targetStack.push(Dep.target);
  41.   Dep.target = target; // 将当前 Watcher 对象赋值给 Dep.target
  42. }
  43.  
  44. // 从 Watcher 栈中弹出最后一个 Watcher 对象
  45. export function popTarget() {
  46.   Dep.target = targetStack.pop(); // 恢复 Watcher 栈的上一个 Watcher 对象
  47. }
  1. export default class Watcher {
  2.   constructor(vm, expOrFn, cb) {
  3.     this.vm = vm; // Vue 实例
  4.     this.getter = expOrFn; // 数据获取函数
  5.     this.cb = cb; // 回调函数，数据变化时触发
  6.     this.value = this.get(); // 初始化时执行 getter 函数，获取当前数据的值
  7.   }
  8.  
  9.   // 更新 Watcher 的回调函数
  10.   update() {
  11.     const oldValue = this.value;
  12.     this.value = this.get(); // 重新获取数据的值
  13.     this.cb.call(this.vm, this.value, oldValue); // 执行回调函数，通知数据变化
  14.   }
  15.  
  16.   // 评估 getter 函数，建立依赖关系
  17.   get() {
  18.     pushTarget(this); // 将当前 Watcher 对象推入 Watcher 栈中
  19.     const vm = this.vm;
  20.     let value;
  21.     try {
  22.       value = this.getter.call(vm, vm); // 执行 getter 函数，获取当前数据的值
  23.     } catch (e) {
  24.       throw e;
  25.     } finally {
  26.       popTarget(); // 从 Watcher 栈中弹出最后一个 Watcher 对象
  27.     }
  28.     return value;
  29.   }
  30. }
get方法核心 - 收集依赖 dep.depend()
  • 当访问（get）响应式对象的属性时，Vue.js 会收集当前正在执行的 Watcher 对象作为依赖。这个过程是通过 dep.depend() 实现的，其中 dep 是依赖对象（Dep 实例）。
  • Watcher 对象可以理解为观察者，它负责响应式数据与视图之间的绑定关系。当数据变化时，与之相关的 Watcher 将被通知，从而更新视图。
set方法核心 - 通知依赖更新 dep.notify()
  • 当设置（set）响应式对象的属性时，Vue.js 会调用 dep.notify() 来通知所有依赖于该属性的 Watcher 进行更新。
  • 这意味着所有观察此数据的视图组件将会重新渲染以反映数据变化。

总结

模板中绑定data数据发送变化时为什么视图会同步更新呢?

这时候这张图就更高理解了。

  1. 响应式对象(响应式原理)：

    • 当你将一个普通的 JavaScript 对象传给 Vue 实例的 data 选项时，Vue 会遍历这个对象的属性，并使用 Object.defineProperty 或 Proxy 将每个属性转换为 getter 和 setter、引用data数据实际上是访问数据对象属性的 get 方法、修改数据实际上是在调用数据对象属性的set方法。
    • 这样一来，当属性被访问或修改时，Vue 能够捕捉到这些操作，并触发相应的依赖更新。

  2. 依赖追踪与 Watcher：

    • Vue 内部维护了一个依赖收集的系统。每个响应式属性都会有一个关联的 Watcher 对象。
    • 当属性被访问时，Watcher 会将当前组件实例与这个属性建立关联（依赖追踪），确保在属性变化时能够通知相关的 Watcher 执行更新操作。

  3. 虚拟 DOM 及更新优化(虚拟dom和diff算法)：

    • Vue 使用虚拟 DOM 来提高渲染效率。当数据发生变化时，Vue 会生成新的虚拟 DOM，并通过比对算法找出变化的部分，然后更新到实际 DOM 中，而不是直接操作实际 DOM。

  4. 异步更新队列：

    • Vue 在更新数据时是异步执行的，多个数据的变化会被合并成一个更新操作，以提高性能并避免不必要的计算和 DOM 操作。

  5. 渲染 Watcher：

    • 每个组件实例都有一个渲染 Watcher，它是 Vue 在实例化过程中自动创建的。这个 Watcher 负责将组件的 render 函数渲染成虚拟 DOM，并在数据变化时重新渲染组件。

(4) hook 的调用（从源码上理解 beforeCreate 和 created 调用时机）

  1. callHook(vm, 'beforeCreate', undefined, false /* setContext */)
  2. initInjections(vm) // resolve injections before data/props
  3. initState(vm)
  4. initProvide(vm) // resolve provide after data/props
  5. callHook(vm, 'created')

这里也很好理解了生命周期hook 中的 beforeCreate 和 created 的调用时机。

beforeCreate 在状态初始化前、这时状态数据的肯定是不能用的

created 在状态初始化完成后调用。

3、总结响应式原理

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/826512
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号