vue 添加自定义属性不依赖data数据_前端面试大全：Vue源码解读

这一篇文章我们将深入解读vue源码实现，带大伙逐步的去理解vue的实现原理。这些知识点相对而言理解起来会很有难度，可能需要多次阅读才能理解。

响应式原理

Vue 内部使用了 Object.defineProperty() 来实现数据响应式，通过这个函数可以监听到 set 和 get 的事件。

var data = { name: 'yck' }observe(data)let name = data.name // -> get valuedata.name = 'yyy' // -> change valuefunction observe(obj) { // 判断类型 if (!obj || typeof obj !== 'object') { return } Object.keys(obj).forEach(key => { defineReactive(obj, key, obj[key]) })}function defineReactive(obj, key, val) { // 递归子属性 observe(val) Object.defineProperty(obj, key, { // 可枚举 enumerable: true, // 可配置 configurable: true, // 自定义函数 get: function reactiveGetter() { console.log('get value') return val }, set: function reactiveSetter(newVal) { console.log('change value') val = newVal } })}

以上代码简单的实现了如何监听数据的 set 和 get 的事件，但是仅仅如此是不够的，因为自定义的函数一开始是不会执行的。只有先执行了依赖收集，才能在属性更新的时候派发更新，所以接下来我们需要先触发依赖收集。

{ {name}}

在解析如上模板代码时，遇到 { {name}} 就会进行依赖收集。

接下来我们先来实现一个 Dep 类，用于解耦属性的依赖收集和派发更新操作。

// 通过 Dep 解耦属性的依赖和更新操作class Dep { constructor() { this.subs = [] } // 添加依赖 addSub(sub) { this.subs