<html>

   <head>

     <meta charset="UTF-8" />

     <meta

       name="viewport"

       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

     />

     <meta http-equiv="X-UA-Compatible" content="ie=edge" />

     <title>proxyVue</title>

     <style>

         #app {

             margin: 100px auto 0 auto;

             width: 300px;

         }

         #btn {

             margin: 10px auto;

         }

     </style>

   </head>

   <body>

     <div id="app">

       <input type="text" v-model="num" />

       <input id="btn" type="button" value="添加到Todolist" v-click="addList" /><br/>

       <span>您输入的是：</span><span v-bind="num"></span>

       <ul id="list"></ul>

     </div>

   </body>

   <script>

     class proxyVue {

       constructor(options) {

         this.$options = options || {};

         this.$methods = this._methods = this.$options.methods;

         const data = (this._data = this.$options.data);

         this.subscribe = {};

         this.observe(data);

         this.compile(options.el);

       }

       publish(watcher) {

         if (!this.subscribe[watcher.property])

           this.subscribe[watcher.property] = [];

         this.subscribe[watcher.property].push(watcher);

       }

       observe(data) {

         const that = this;

         let handler = {

           get(target, property) {

             return target[property];

           },

           set(target, property, value) {

             let res = Reflect.set(target, property, value);

             that.subscribe[property].map(item => {

               item.update();

             });

             return res;

           }

         };

         this.$data = new Proxy(data, handler);

       }

       compile(el) {

         const nodes = Array.prototype.slice.call(

           document.querySelector(el).children

         );

         let data = this.$data;

         nodes.map(node => {

           if (node.children.length > 0) this._complie(node);

           if (node.hasAttribute("v-bind")) {

             let property = node.getAttribute("v-bind");

             this.publish(new Watcher(node, "innerHTML", data, property));

           }

           if (node.hasAttribute("v-model")) {

             let property = node.getAttribute("v-model");

             this.publish(new Watcher(node, "value", data, property));

             node.addEventListener("input", () => {

               data[property] = node.value;

             });

           }

           if (node.hasAttribute("v-click")) {

             let methodName = node.getAttribute("v-click");

             let mothod = this.$methods[methodName].bind(data);

             node.addEventListener("click", mothod);

           }

         });

       }

     }

     class Watcher {

       constructor(node, attr, data, property) {

         this.node = node;

         this.attr = attr;

         this.data = data;

         this.property = property;

       }

       update() {

         this.node[this.attr] = this.data[this.property];

       }

     }

     // 渲染todolist列表

     const Render = {

       // 初始化

       init: function(arr) {

         const fragment = document.createDocumentFragment();

         for (let i = 0; i < arr.length; i++) {

           const li = document.createElement("li");

           li.textContent = arr[i];

           fragment.appendChild(li);

         }

         list.appendChild(fragment);

       },

       addList: function(val) {

         const li = document.createElement("li");

         li.textContent = val;

         list.appendChild(li);

       }

     };

     // 实例化一个proxyVue

     window.onload = function() {

       let vm = new proxyVue({

         el: "#app",

         data: {

           num: 0,

           arr: []

         },

         methods: {

           addList() {

             this.arr.push(this.num);

             Render.addList(this.num);

           }

         }

       });

     };

   </script>

 </html>

 摘自https://github.com/nightzing/vue3-Proxy/blob/master/proxyVue.html

 　　

proxy vue3.0的更多相关文章

  1. Vue3.0 响应式数据原理：ES6 Proxy

    Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...

  2. 预计2019年发布的Vue3.0到底有什么不一样的地方？

    摘要: Vue 3.0预览. 原文:预计今年发布的Vue3.0到底有什么不一样的地方? 作者:小肆 微信公众号:技术放肆聊 Fundebug经授权转载,版权归原作者所有. 还有几个月距离 vue2 的 ...

  3. VUE3.0升级与配置（跨域、全局scss变量等）

    1.检查本机vue版本 vue -V 2.升级vue3.0命令 npm install -g @vue/cli 3.创建完项目后,在项目根目录新增vue.config.js文件,插入代码(简洁) mo ...

  4. vue3.0中的双向数据绑定方法

    熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.definePrope ...

  5. vue3.0和2.0的区别，Vue-cli3.0于 8月11日正式发布，更快、更小、更易维护、更易于原生、让开发者更轻松

    vue3.0和2.0的区别Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快.更小. ...

  6. Vue3.0 Function API---------引用

    1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...

  7. Proxy-代理器（预计vue3.0实现双向绑定的方式）

    todo 常见的基于数据劫持的双向绑定有两种实现,一个是目前Vue在用的Object.defineProperty,另一个是ES2015中新增的Proxy,而Vue的作者宣称将在Vue3.0版本后加入 ...

  8. 快速进阶Vue3.0

    在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版. 可以直接看 github源码. 新版Vue 3.0计划并已实现的主要架构改 ...

  9. Vue3.0初体验

    最近看了Vue3.0的相关信息,相比Vue2.0有以下优点: Performance:性能更比Vue 2.0强. Tree shaking support:可以将无用模块"剪辑", ...

随机推荐

  1. openresty　安装指南

    对于一些常见的 Linux 发行版本,OpenResty 提供 官方预编译包.确保你首先用这种方式来安装. 如果您还没有下载 OpenResty 的源码包, 请到 Download 页下载. 首先,您 ...

  2. 《linux内核分析》 第二周

    20135130 王川东 计算机三个“法宝”:存储程序计算机.函数调用堆栈和中断机制 深入理解函数调用堆栈: 堆栈是C语言运行时必须的一个记录调用路径和参数的空间: 作用包括: 函数调用框架: 保存参 ...

  3. Java的继承，final关键字，super关键字

    1.继承的初始化顺序: 父类—>父类的初始化对象中的属性—>父类的构造方法—>子类—>子类的初始化对象中的属性—>子类的构造方法 若有构造方法:则先执行属性,再执行构造方 ...

  4. Android开发第二阶段（2）

    昨天:总结了第一阶段的开发经验 今天:学习了一下java中对事件处理这块的初步了解比如设置监听器等 明天:我会走进我们的代码去看看相关的一些知识.

  5. centos7环境下mysql安装

    1.去官网下载合适的yum源安装包 https://dev.mysql.com/downloads/repo/yum/ 2.yum 本地安装 命令:yum localinstall mysql57-c ...

  6. 0527 SCRUM团队项目7.0

    Sprint回顾 让我们一次比一次做得更好.   1.回顾组织 主题:“我们怎样才能在下个sprint中做的更好?” 时间:设定为1至2个小时. 参与者:整个团队. 场所:能够在不受干扰的情况下讨论. ...

  7. iOS-封装UIPickerView

    创建类WJPickerView继承与UIView ProvinceModel是省市的model,包含属性 @property (nonatomic, strong) NSString *provinc ...

  8. 【插件】LinqToExcel常用对象

    1.ExcelQueryFactory对象(1)获取工作表名集合IEnumerable<string> GetWorksheetNames() //获取工作薄中的工作表名foreach ( ...

  9. 【EF】EF Code First Migrations数据库迁移

    1.EF Code First创建数据库 新建控制台应用程序Portal,通过程序包管理器控制台添加EntityFramework. 在程序包管理器控制台中执行以下语句,安装EntityFramewo ...

  10. Spring Cloud Config

    1.config服务端配置 1.1 引入依赖 <dependency> <groupId>org.springframework.boot</groupId> &l ...