<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. Scrum立会报告+燃尽图（十一月二十四日总第三十二次）：视频剪辑

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://git.coding.net/zhang ...

  2. scrum立会报告+燃尽图（第三周第三次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2286 项目地址:https://coding.net/u/wuyy694 ...

  3. 【线段树维护复杂状态】Ryuji doesn't want to study

    https://nanti.jisuanke.com/t/31460 tree[rt].ans = tree[rt << 1].ans + tree[rt << 1 | 1]. ...

  4. Rsyslog的模板template详解

    一. Template功能 根据用户需求指定任意格式 动态生成文件名 每个输出都使用了一些模板,包括针对文件的,针对用户消息等 备注: 旧版本:$template 新版本:template() V6之 ...

  5. lintcode-426-恢复IP地址

    426-恢复IP地址 给一个由数字组成的字符串.求出其可能恢复为的所有IP地址. 样例 给出字符串 "25525511135",所有可能的IP地址为: [ "255.25 ...

  6. Tomcat配置 —— server.xml

    Tomcat的核心组件是servlet容器. Tomcat各个组件之间的嵌套关系 server.xml配置如下: <Server port="8005" shutdown=& ...

  7. WCF RestFull提交数据超出限额解决方法

    最近在使用wcf restfull时出现了超大数据提交出错的问题. 服务端会返回错误:服务器处理请求时遇到错误.有关构造有效服务请求的内容,请参阅服务帮助页.异常消息为“反序列化对象 属于类型 Yes ...

  8. Struts2（二）

    以下内容是基于导入struts2-2.3.32.jar包来讲的 1.关于StrutsPrepareAndExecuteFilter 启动StrutsPrepareAndExecuteFilter时加载 ...

  9. 注解实现IOC和DI

    1.组件扫描 Spring3.0后为我们引入了组件自动扫描机制,它可以在类路径底下寻找标注了@Component.@Service.@Controller.@Repository注解的类,并把这些类纳 ...

  10. 复利计算C转java版

    import java.util.Scanner; public class Compound_int { public static void main(String[] args) { tip() ...