Object.defineProperty介绍--

    let obj = {};

    Object.defineProperty(obj,'school',{

        configurable : true, // 属性能否被删除

        //writable : true, // 属性能否被修改

        enumerable : true, // 属性能否枚举

        //value : 'zfpx', // 设置属性值

        set : function(value){

            console.log(value); // obj.school赋值时， 调用set() 方法

        },

        get : function(){

            return 'zfpx'; // 获取 obj.school 的值时，调用 get() 方法

        }

    })
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>

<div id="app">

    <p>{{a.a}}</p>

    <div>{{b}}

<div>{{b}}</div>

    </div>

</div>

</body>

<!-- mvvm 双向数据绑定

vue 数据劫持+发布订阅模式

不兼容低版本 Object.defineProperty -->

<script>

    (function(window,document){

        function ZF(options = {}){

            this.$options = options; // 将所有的属性挂载在 $options 上

            let data = this._data = this.$options.data;

            this.observe(data);

            for(let key in data){ // 把data属性通过Object.defineProperty的方式定义属性

                // 数据代理

                // this代理了this._data

                Object.defineProperty(this,key,{

                    enumerable : true, // 可枚举

                    get: function(){

                        return this._data[key];

                    },

                    set: function(newVal){ // 更改值的时候

                        this._data[key] = newVal;

                    }

                });

            }

            this.Compile(options.el,this);

        }

        // 编译

        ZF.prototype.Compile = function(el,vm){

            vm.$el = document.querySelector(el);

            let fragment = document.createDocumentFragment();

            while(child = vm.$el.firstChild){  // 将app中的内容 移入内存中

                fragment.appendChild(child);

            }

            // 循环每一层

            Array.from(fragment.childNodes).forEach(function(node){

                let text = node.textContent;

                let reg = /\{\{(.*)\}\}/;

                if( reg.test(text)){

                    let arr = RegExp.$1.split('.');

                    let val = vm;

                    console.log(node.childNodes)

                    console.log(arr)

                    arr.forEach(function(k){

                        val = val[k];

                    })

                    // 替换

                    node.textContent = text.replace(/\{\{(.*)\}\}/,val)

                }

                //node.textContent.textContent(12)

            })

            vm.$el.appendChild(fragment);

        }

        // 观察对象给对象增加ObjectDefineProperty;

        ZF.prototype.observe = function(data){

            //console.log(data)

            return new Observe(data);

        }

        function Observe(data){

            for(let key in data){ // 把data属性通过Object.defineProperty的方式定义属性

                let val = data[key];

                // 递归

                if(typeof val === 'object'){

                    Observe(val);

                }

                Object.defineProperty(data,key,{

                    enumerable : true, // 可枚举

                    get: function(){

                        return val;

                    },

                    // 数据劫持

                    set: function(newVal){ // 更改值的时候

                        if(newVal === val){

                            return;

                        }

                        if(typeof newVal === 'object'){

                            Observe(newVal);

                        }

                        val = newVal; //

                    }

                });

            }

        }

        window.ZF = ZF;

    })(window,document);

    let zf = new ZF({

        el : "#app",

        data : {a:{a:'是a'},b:'是b'},

    })

</script>

</html>

vue mvvm原理与简单实现 -- 上篇的更多相关文章

  1. vue 实现原理及简单示例实现

    目录 相关html代码,用于被解析绑定数据 observer代码 Dep代码 Watcher 代码 Compile 代码 vue 简要构造函数 创建vue实例 结语 主要理解.实现如下方法: Obse ...

  2. 对Vue中的MVVM原理解析和实现

    对Vue中的MVVM原理解析和实现 首先你对Vue需要有一定的了解,知道MVVM.这样才能更有助于你顺利的完成下面原理的阅读学习和编写 下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章 ...

  3. mvvm实现一个简单的vue

    vue,基于mvvm模式下的一个前端框架 mvvm模式下简单的实现数据代理,数据劫持 1.是用Object.defineProperty 实现数据代理 2.使用发布订阅者模式,配合 Object.de ...

  4. vue运行原理

    Vue工作原理小结 本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简 ...

  5. 直播课（1）如何通过数据劫持实现Vue(mvvm)框架

    19.6.28更新: 这篇博客比较完善:将每一部分都分装在单独的js文件中: 剖析Vue原理&实现双向绑定MVVM 半个月前看的直播课,现在才自己敲了一遍,罪过罪过 预览: 思路: 简单实现V ...

  6. vue 编译原理 简介

    来源 tinycompile 关于vue的内部原理其实有很多个重要的部分,变化侦测,模板编译,virtualDOM,整体运行流程等. 之前写过一篇<深入浅出 - vue变化侦测原理> 讲了 ...

  7. 总结Vue第一天：简单介绍、基本常用知识、辅助函数

    总结Vue第一天:简单介绍.基本常用知识.辅助函数 中文官网:https://cn.vuejs.org/v2/guide/syntax.html 遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的 ...

  8. vue 快速入门 系列 —— 侦测数据的变化 - [vue api 原理]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue api 原理] 前面(侦测数据的变化 - [基本实现])我们已经介绍了新增属性无法被侦测到,以及通过 delete 删除数据也不会 ...

  9. HBase笔记：对HBase原理的简单理解

    早些时候学习hadoop的技术,我一直对里面两项技术倍感困惑,一个是zookeeper,一个就是Hbase了.现在有机会专职做大数据相关的项目,终于看到了HBase实战的项目,也因此有机会搞懂Hbas ...

随机推荐

  1. 前向传播和反向传播实战（Tensor）

    前面在mnist中使用了三个非线性层来增加模型复杂度,并通过最小化损失函数来更新参数,下面实用最底层的方式即张量进行前向传播(暂不采用层的概念). 主要注意点如下: · 进行梯度运算时,tensorf ...

  2. 第1节-认识Jemeter

    1-Jemeter是什么 Apache JMeter是一款100%纯java实现的应用程序,它是开源的.该软件用于测试软件系统或应用程序的功能和性能. 最初设计这个软件的目的是用户测试web应用程序, ...

  3. open()和with open()的区别

    open 1,打开文件 file=open("文件名",“读写模式”) 2,操作文件 *** 3,关闭文件 file.close() 注意事项: 使用open方法,文件操作完毕之后 ...

  4. 887. 求组合数 III（模板 卢卡斯定理）

    a,b都非常大,但是p较小 前边两种方法都会超时的  N^2 和NlongN  可以用卢卡斯定理  P*longN*longP     定义: 代码: import java.util.Scanner ...

  5. [CF662C Binary Table][状压+FWT]

    CF662C Binary Table 一道 FWT 的板子-比较难想就是了 有一个 \(n\) 行 \(m\) 列的表格,每个元素都是 \(0/1\),每次操作可以选择一行或一列,把 \(0/1\) ...

  6. gulp常用插件之gulp-uglify使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-uglify这是一款使用UglifyJS缩小js文件. 更多使用文档请点击访问gulp-uglify工具官网. 安装 一键安装不多解释 ...

  7. 使用U盘装Windows10系统

    一.装备工作 使用U盘装系统需要准备以下工具: 8G左右的U盘一个.由于制作启动盘会删除U盘的所有数据,所以重要资料请提前备份. 系统的镜像文件.这里我推荐MSDN, 我告诉你.这里下载的镜像和官方的 ...

  8. 【巨杉数据库SequoiaDB】企业级和开源领域“两开花”，巨杉引领国产数据库创新

    2019年12月15日,OSC 源创会·年终盛典在深圳圆满举行.巨杉数据库作为业界领先的金融级分布式数据库厂商, 获得 “2019年开源数据库先锋企业” 及 “2019 GVP-Gitee最有价值开源 ...

  9. LaTeX技巧006：使用pdfLaTeX时，添加PDF文件属性的方法

    PDF文件中含有标题.主题.作者.关键字等属性.这些属性,在Acrobat Reader或者Foxit Reader中可以通过”文件”菜单下的”属性”查看,在Acrobat Read中还可以使用Ctr ...

  10. 牛客CSP-S提高组赛前集训营4 赛后总结

    复读数组 分成 3 种区间算答案: 一个块内的区间 两个块交界处,长度小于块长的区间 长度不小于块长的区间 对于第三种区间,容易发现每个区间的权值一样,只需要算出个数即可. 对于前两种空间,我的思路是 ...