调用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>myvue</title>

    <script src="myvue.js"></script>

</head>

<body>

    <div id="app">

        姓名：{{name}}

        <div>

            年龄：{{age}}

            <p>

                身高：{{height}}

            </p>

            <p>

                体重：{{weight}}

            </p>

        </div>

        <div>

            双向数据绑定：<input type="text" v-model="inputData">

            {{inputData}}

        </div>

    </div>

    <script>

        let vm = new Myvue({

            el: '#app',

            data: {

                name: 'lili',

                age: 18,

                height: '170cm',

                weight: '65kg',

                inputData: '双向数据绑定'

            }

        })

    </script>

</body>

</html>

myvue.js 核心实现

// 基础知识点扫盲

// - 自定义事件，和调用自定义事件 new CustomEvent   this.dispathEvent

// - 监听拦截数据方法 Proxy， new Proxy(data, set(target, prop, newValue){})

// - EventTarget  是一个 DOM 接口，由可以接收事件

class Myvue extends EventTarget{

    constructor(option) {

        super();

        this.option = option

        this._data = this.option.data;

        this.el = document.querySelector(option.el);

        this.observe(this._data); // 监听观察数据

        this.complieNode(this.el) // 编译节点，渲染数据

    }

    observe(data) {

        let _this = this;

        // 每次访问、设置等 data 的时候，都会经过 proxy 代理过后的对象，便于拦截，监听等操作

        this._data = new Proxy(data, {

            set(target, prop, newValue){

                // 监听到新值变化

                // 如何通知视图修改数据？

                console.log(newValue);

                // 自定义事件

                let event = new CustomEvent(prop, {

                    detail: newValue

                });

                _this.dispatchEvent(event);

                return Reflect.set(...arguments)  // 设置值

            }

        })

    }

    complieNode(el) {

        let child = el.childNodes;

        // 类数组转成数组

        [...child].forEach(element => {

            if(element.nodeType === 3) {

                // console.log('文本节点')

                let textContent = element.textContent;

                // console.log(textContent) {{name}} {{age}}

                let reg = /\{\{\s*([^\s\{\}]+)\s*\}\}/g;

                if(reg.test(textContent)) {

                    let $1 = RegExp.$1;

                    // console.log($1); name age

                    if(this._data[$1]) {

                        element.textContent = textContent.replace(reg, this._data[$1]);

                        // 绑定自定义事件，自定义事件名就是 双向数据绑定的值 name age inputData

                        this.addEventListener($1, e => {

                            console.log(e)

                            element.textContent = textContent.replace(reg, e.detail);

                        })

                    }

                }

            } else if(element.nodeType===1){

                // console.log('元素节点')；

                let attr = element.attributes;

                if(attr.hasOwnProperty('v-model')) {

                    let keyName = attr['v-model'].nodeValue; // inputData

                    element.value = this._data[keyName];

                    // 绑定input 事件， 修改input内容时候，同时更新掉所有 {{inputData}} 数据， 即监听 inputData

                    element.addEventListener('input', e => {

                        this._data[keyName] = element.value ;

                        // this.observe(this._data);

                    })

                }

                this.complieNode(element)

            }

        });

    }

}

双向绑定数据的实现（new Proxy 版本）的更多相关文章

  1. vue双向绑定(数据劫持+发布者-订阅者模式)

    参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...

  2. vue 结合localStorage 来双向绑定数据

    结合localStorage 来双向绑定数据(超级神奇) localStorage.js: const STORAGE_KEY = 'todos_vuejs' export default { fet ...

  3. 组件的通信 ：provide / inject 对象进入后，就等于不用props，然后内部对象，直接复制可以接受数组，属性不能直接复制，可以用Object.assgin覆盖对象，或者Vue的set 双向绑定数据

    组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...

  4. 关于简单的数据双向绑定原理，defineProperty 和Proxy演示

    双向绑定,也就是说js中的数据传到页面,页面中的内容到js,实现同步更新,简单的演示可以直接复制下放HTML代码运行. 在这个例子中,我们使用defineProperty ,Object.define ...

  5. 手写vue双向绑定数据

    来一张原理图: 实现思路: (1)绑定data 种的数据,为每个数据添加指令.通过Object,defineProperty() 来通知属性是否更改 (2) 找到每个DOM节点的指令.绑定事件.并绑定 ...

  6. vue 双向绑定 数据修改但页面没刷新

    在数据改动的代码后加 this.$forceUpdate(); 若是在某个特定方法中 则将this改为方法中设定的名称

  7. js 双向绑定数据

    let aaa = []; let bbb = [1,2,3]; let ccc = [0,9,8]; aaa = bbb; //此时aaa与bbb被绑定(aaa指向bbb的指向) ,若使用push则 ...

  8. Vue 中 双向绑定数据

    1.文本 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  9. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

随机推荐

  1. C#设计模式之7-桥接模式

    桥接模式(Bridge Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/401 访问. 桥接模式属于结构 ...

  2. speedtest测速网站测速节点添加流程

    一.准备一台服务器: 系统需求:常见Linux系统: 二.服务器入网(确保可以访问互联网): 三.ssh登录到服务器安装speedtest守护程序程序包: 安装和启动,执行以下命令: curl -O ...

  3. LeetCode.516 最长回文子序列 详解

    题目详情 给定一个字符串s,找到其中最长的回文子序列.可以假设s的最大长度为1000. 示例 1: 输入: "bbbab" 输出: 4 一个可能的最长回文子序列为 "bb ...

  4. JavaScript在HTML中的基础用法总结

    网页主要由三部分组成,分别为html.CSS和Javascript.如果说HTML是肉身,CSS是皮相,那Javascript就是灵魂.因此,三者的联系与融合则至关重要.本文就来为大家讲解一下Java ...

  5. 欧几里得算法（gcd） 裴蜀定理 拓展欧几里得算法（exgcd）

    欧几里得算法 又称辗转相除法 迭代求两数 gcd 的做法 由 (a,b) = (a,ka+b) 的性质:gcd(a,b) = gcd(b,a mod b) int gcd(int a,int b){ ...

  6. 区分多个web driver实例

    固然可以用加载不同cookie的办法,让3个帐号共享一个web driver登陆,但总感觉切换麻烦,干脆用了3个web driver实例.问题来了,如何区分?不是说程序里如何区分,机器比人聪明,知道外 ...

  7. 使用分区挂载 ftp 目录

    ftp挂载分区上去后无法识别的问题困扰了我好几天,今天有时间把它研究了一下,拿出来与大家分享一下. ftp目录挂载分区前与挂载分区后的区别[root@localhost ~]# ls -Zd /var ...

  8. 团队作业5：Alpha版本测试和发布（歪瑞古德小队）

    目录 一.项目文档和代码 二.Alpha版本测试报告 2.1 功能测试 2.1.1 功能列表 2.1.2 场景测试 2.1.3 测试结果 2.1.4 bug清单 2.2 兼容性测试 2.3 性能测试 ...

  9. 第一篇scrum冲刺博客--Interesting-Corps

    第一篇scrum冲刺博客 一.Alpha阶段各成员任务 鲍鱼铭 任务名称 预计时间 主页页面和探测空间设计及布局实现 6h 主页页面跳转社区功能及社区设计及布局实现 6h 搜索页面跳转.设计及布局实现 ...

  10. Android开发之常用框架WebView详解代码。超详细，送给初学者，完全掌握此控件

    这是我特意为新手小白写的一个代码,教大家完完全全掌握WebView, 我感觉,你看懂这个,基本上可以满足以后工作中的需要了,(只针对Webview的使用),但是其实它还有好多功能,比如真正的设计到和H ...