VUE - MVVM - part1 - defineProperty

liukai90 发布于2019-08-22 16:12 / 2360人阅读

摘要：在中关于如何实现在网上可以搜出不少，在看了部分源码后，梳理一下内容。换个说法，当我们取值的时候，函数自动帮我们添加了针对当前值的依赖，当这个值发生变化的时候，处理了这些依赖，比如说节点的变化。

在 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
// test
callback.target = null
object.test = "test3"
// 我被添加进去了，新的值是：test3
// 添加第二个函数，新的值是：test3

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

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

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

点击查看相关代码

系列文章地址

VUE - MVVM - part1 - defineProperty

VUE - MVVM - part2 - Dep

VUE - MVVM - part3 - Watcher

VUE - MVVM - part4 - 优化Watcher

VUE - MVVM - part5 - Observe

VUE - MVVM - part6 - Array

VUE - MVVM - part7 - Event

VUE - MVVM - part8 - 优化Event

VUE - MVVM - part9 - Vue

VUE - MVVM - part10 - Computed

VUE - MVVM - part11 - Extend

VUE - MVVM - part12 - props

VUE - MVVM - part13 - inject & 总结

云服务器 GPU云服务器 Part1 defineProperties defineProperty MVVM

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94141.html

VUE - MVVM - part2 - Dep

摘要：看这篇之前，如果没看过先移步看实现中。同样的，在取值时收集依赖，在设置值当值发生变化时触发依赖。中实现了一个的类来处理以上两个问题，之后再说。以下语法下的，源码中差不多就这样点击查看相关代码系列文章地址优化优化总结看这篇之前，如果没看过 step1 先移步看实现 VUE 中 MVVM - step1 - defineProperty。在上一篇我们大概实现了，Vue 中的依赖收集和...

hover_lew 2019-08-22 16:12 评论0 收藏0
VUE - MVVM - part6 - Array

摘要：回顾在前面的几个中，我们实现对象的属性的监听，但是有关于数组的行为我们一直没有处理。并且上述的几个数组方法是数组对象提供的，我们要想办法去触发下的函数。在设置值的时候就能成功触发依赖。看这篇之前，如果没有看过之前的文章，可拉到文章末尾查看之前的文章。回顾在前面的几个 step 中，我们实现对象的属性的监听，但是有关于数组的行为我们一直没有处理。我们先分析下导致数组有哪些行为： ...

0x584a 2019-08-22 16:33 评论0 收藏0
VUE - MVVM - part9 - Vue

摘要：调用父类的方法类在我们上一步已经实现。我们先实现的绑定，因为是要被监听，所以要进行进一步的处理。调用父类的方法方法绑定完事，其实就这么简单。看这篇之前，如果没有看过之前的文章，可拉到文章末尾查看之前的文章。前言激动人心的时候即将来临，之前我们做的 8 步，其实都在为这一步打基础，这一步，我们来简单实现一个 Vue 对象，还没有看过之前代码的同学，请确认看过之前的文章。主要实现内...

yzd 2019-08-22 16:45 评论0 收藏0
VUE - MVVM - part5 - Observe

摘要：具体代码执行方式进入到的目录下，命令行运行即可。确保为一个对象如果对象下有则不需要再次生成函数返回该对象的实例，这里判断了如果该对象下已经有实例，则直接返回，不再去生产实例。这就确保了一个对象下的实例仅被实例化一次。看这篇之前，如果没有看过之前的文章，可拉到文章末尾查看之前的文章。回顾在 step4 中，我们大致实现了一个 MVVM 的框架，由3个部分组成： defineRe...

xi4oh4o 2019-08-22 16:23 评论0 收藏0
VUE - MVVM - part4 - 优化Watcher

摘要：关于中的的实现，差不多也就这样了，当然这仅仅是基础的实现，而且视图层层渲染抽象成一个函数。不同于中的实现，这里少了很多各种标记和应用标记的过程。看这篇之前，如果没有看过之前的文章，可拉到文章末尾查看之前的文章。回顾首先我们思考一下截止当前，我们都做了什么通过 defineReactive 这个函数，实现了对于数据取值和设置的监听通过 Dep 类，实现了依赖的管理通过 Wa...

CoffeX 2019-08-22 16:17 评论0 收藏0