mvvm实现一个简单的vue

最新推荐文章于 2021-09-02 17:07:11 发布

置顶

梦想编程

最新推荐文章于 2021-09-02 17:07:11 发布

阅读量142

点赞数

文章标签：程序员前端

本文链接：https://blog.csdn.net/weixin_44970764/article/details/90604300

版权

本文介绍了如何在MVVM模式下实现Vue框架的基础，包括使用Object.defineProperty进行数据代理，以及结合发布订阅者模式实现数据劫持。讨论了依赖收集和触发的重要性，虽然简化了过程并未涉及具体的依赖收集实现，但提供了学习前端开发的参考。

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

vue，基于mvvm模式下的一个前端框架

　　mvvm模式下简单的实现数据代理，数据劫持

　　1.是用Object.defineProperty 实现数据代理

　　2.使用发布订阅者模式，配合 Object.defineProperty，实现数据劫持

　　　　数据劫持包括依赖收集和依赖促发

　　（只考虑最简单的方式，并且没有包括具体的依赖收集，我模拟的依赖收集，依赖收集得是在模板解析的时候，需要使用正则匹配出vue的一般指令和表达式）

/* 实现一个简易的vue */
class myvue {
    constructor (option) {
        let _self = this
        this._data = option.data
        this.proxydata(_self)
        /* 使用发布订阅者模式实现数据劫持 */
        this.Datahijacking(_self)

        /* 实现一下模拟依赖收集 */
        /* 本身模板解析时，会使用正则去匹配表达式和一般指令
            匹配成功的表示是和一般指令都会调用以此数据劫持上的get方法
        */
        /* 假知我们传入的就是name 和 age */
        this._data.name;
        this._data.name;
        this._data.name;       
        this._data.age;
        this._data.age;
        /* 上面代表模板解析的时候一共调用的三次name 和 两次age */
    }
    /* 实现vue对_data数据的代理 */
    proxydata(_self) {
        /* 遍历传入的data的所有属性 */
        Obje