Vue

VUE - part1 - defineProperty

想要了解 VUE 是如何现实响应式，必须先要了解 defineProperty 作为 VUE 框架实现基础，我们先来看看该如何使用 defineProperty 。

breeze

Apr 11, 2018 — 3 min read

在 VUE 中关于如何实现在网上可以搜出不少，在看了部分源码后，梳理一下内容。

首先，我们需要了解一下 js 中的一个 API :
Object.defineProperty(obj, prop, descriptor)

一般情况下我们为一个对象添加一个属性一般都会这么写

let object = {}
object.test = 'test'

Object.defineProperty 也能做到同样的效果

let object = {}, test = 'test'
Object.defineProperty(object, 'test', {
    configurable: true,             // 描述该属性的描述符能否被改变，默认值为 false
    enumerable: true,               // 能否被遍历，比如 for in，默认值为 false
    get: function(){                // 取值的时候调用，object.test，默认值为 false
        console.log('enter get')
        return test
    },
    set: function(newValue){        // 设置值的时候使用
        console.log('enter set')
        test = newValue
    }
})

这样写虽然代码量多了不少，但是却拥有了控制属性取值和设置值的权利，让我们来测试一下。

object.test
// enter get
// test
object.test = 'test2'
// enter set
// test2

接着我们把 defindProperty 这个函数封装同时改造一下，方便我们调用

let callback = {
    target: null
}
let defineReactive = function(object, key, value){
    let array = []
    Object.defineProperty(object, key, {
        configurable: true,
        enumerable: true,
        get: function(){
            if(callback.target){
                array.push(callback.target)
            }
            return value
        },
        set: function(newValue){
            if(newValue != value){
                array.forEach((fun)=>fun(newValue, value))
            }
            value = newValue
        }
    })
}

可以从代码中看出来，我在函数内部声明了一个数组用于存放 callback 中的 target，当对 object 进行 get 操作(取值操作)的时候，就会往 array 中存放函数，进行 set 操作(设置值)的时候执行 array 中的函数。看看效果如何

let object = {}
defineReactive(object, 'test', 'test')
callback.target = function(newValue, oldValue){
    console.log('我被添加进去了，新的值是：' + newValue)
}
object.test
// test

callback.target = null
object.test = 'test2'
// 我被添加进去了，新的值是：test2

callback.target = function(newValue, oldValue){
    console.log('添加第二个函数，新的值是：' + newValue)
}
object.test
// test2

callback.target = null
object.test = 'test3'
// 我被添加进去了，新的值是：test3
// 添加第二个函数，新的值是：test3

这样我们就达成了在 object.test 的值发生改变时，运行一个函数队列（虽然这个队列挺简陋的）的目的。

换个说法，当我们取值的时候，函数自动帮我们添加了针对当前值的依赖，当这个值发生变化的时候，处理了这些依赖，比如说 DOM 节点的变化。

这个也是 VUE 中实现 MVVM 的最核心的代码，当然在 VUE 中，这个依赖收集的过程远比现在的代码要复杂，这里仅仅实现了依赖的收集和触发，对于依赖的管理这里的代码还做不到。
只是简单的了解一下 VUE 中依赖收集的过程，关于如何去完美的收集依赖，还需要了解几个概念，之后再说。

点击查看相关代码