vue源码中mvvm.js

最新推荐文章于 2021-05-06 07:29:22 发布

@笑对人生@

最新推荐文章于 2021-05-06 07:29:22 发布

阅读量158

点赞数

分类专栏：前端面试题文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_55808645/article/details/116405646

版权

前端面试题专栏收录该内容

19 篇文章 1 订阅

订阅专栏

本文探讨了MVVM的运行机制，通过图表和DOM结构展示其核心概念。文章重点介绍了如何在MVVM实例中结合Vue2的Object.defineProperty数据劫持和Vue3的proxy数据代理，实现数据的双向绑定。

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

MVVM运行机制图：

在这里插入图片描述

dom结构：


<div id="app">
	<p>{{name}}</p>
</div>

mvvm实例：

var vm = new MVVM({
        el: '#app',
        data: {
            name:'张三'
        }
    });

mvvm实例不仅采用了vue2中的Object.defineProperty()进行数据劫持和结合发布订阅者模式来实现数据的双向绑定，而且也采用了vue3的proxy数据代理

//mvvm.js
function MVVM(pick) {
    //给实例新增一个$pick属性,.并且把传递过来的数据进行暂存，防止在回调函数或者闭包中找不到原来的mvvm实例
    this.$pick = pick;
    this.$pick.beforeCreate && this.$pick.beforeCreate();

    //在实例上新增一个_data 保存传递过来的data数据
    var data = this._data = this.$pick.data;

    //保存this 为了之后使用this的时候保证this指向的正确性
    var they = this;

    //通过Object.keys取出data中每一项数据的属性名,然后遍历调用_proxy方法
    Object.keys(data).forEach(function(key) {
        // 数据代理
        they._proxy(key);
    });
    this.$pick.created && this.$pick.created();

    //为data所有数据进行劫持 结合订阅发布模式
    observe(data, this);

    //解析模版===> #app 或者 <div></div>
    this.$compile = new Compile(pick.el || document.body, this)
}

MVVM.prototype = {
    $watch: function(key, cb, pick) {
        new Watcher(this, key, cb);
    },

    _proxy: function(key) {//实现数据代理
        var they = this;//暂存this即mvvm实例

        //通过defineProperty方法在mvvm实例上(新增/或者)修改所有与data中属性所对应属性,并且为该属性添加get和set方法
        Object.defineProperty(me, key, {//vm.name
            configurable: false,
            enumerable: true,
            get: function proxyGetter() {
                //实现了vm代理data中数据的读操作
                return they._data[key];
            },
            set: function proxySetter(val) {//这是一个回调函数，主要式监听每个属性值并改变对应的数据
                //mvvm实例代理了data内的数据修改和新增。
                they._data[key] = val;
            }
        });
    }
};