简易Vue

最新推荐文章于 2022-03-24 10:38:11 发布

Lafite_1039814352

最新推荐文章于 2022-03-24 10:38:11 发布

阅读量101

点赞数

分类专栏： js 文章标签： Vue

本文链接：https://blog.csdn.net/qq_41685398/article/details/100135576

版权

本文深入探讨了Vue.js的数据响应原理，重点解析了如何通过创建发布器Dep和修改数据的getter和setter来实现数据变化的实时通知，确保视图能够及时更新。

摘要由CSDN通过智能技术生成

原理分析

通过遍历数据, 为数据创建一个发布器Dep，并修改数据的 get 和 set ，在set中利用发布器Dep，通知订阅者Watcher进行数据更新（实际为调用Watcher 的函数）

代码

class Vue {    
    constructor(options) {
        if (typeof options !== 'object') {
            console.error('options is not a object')
            return
        }
        if (!'el' in options || !'data' in options) {
            console.error('options do not contain el and data')
        }
        this.el = typeof options.el == 'string' ?  options.el : 'body'
        
        let tempData = options.data
        this.data = {}
        //数据劫持
        for(let key in tempData){
            let temp = tempData[key]
            const dep = new Dep(key)  //创建发布器
            Object.defineProperty(this.data, key, {
                enumerable: true,
                configurable: true,