<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. VisualSVN Server的配置和使用方法

    VisualSVN Server的配置和使用方法 VisualSVN Server的配置和使用方法[服务器端] 安装好VisualSVN Server后[安装过程看这里],运行VisualSVN Se ...

  2. loadrunner socket协议问题归纳（5）

    获取服务器的返回值,可以用web_reg_save_param函数,该参数最好放到: 语法: int web_reg_save_param(const char *ParamName, <lis ...

  3. Scrum立会报告+燃尽图（十一月二十三日总第三十一次）：界面修改及新页面添加

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

  4. 读<<我是IT小小鸟>>

    <倔强><怒放的生命>以歌曲的含义来引入文章,让文章可以与音乐产生共鸣让读者可以直接明了的就直击到本篇文章的中心含义是非常受用的,在文中写了许多以自己为视角,以自己的成长经历来 ...

  5. 【Leetcode】72 Edit Distance

    72. Edit Distance Given two words word1 and word2, find the minimum number of steps required to conv ...

  6. 虚拟机Centos设置静态IP

    首先确保虚拟网卡(VMware Network Adapter VMnet8)是开启的,然后在windows的命令行里输入“ipconfig /all”,找到VMware Network Adapte ...

  7. 第99天：CSS3中透视perspective

    CSS3中透视perspective 透视原理: 近大远小 . 浏览器透视:把近大远小的所有图像,透视在屏幕上. 理解浏览器的坐标系:浏览器平面为 Z=0的平面,坐标原点默认为图片的中心,可以通过更改 ...

  8. css实现 显示一行文字，超出用...代替

    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;

  9. UVA12583_Memory Overow

    题目是很简单的队列维护的题目. 每次加入之前判断该字母是否在队列以及队列的容量是否超过k即可. #include <iostream> #include <cstdio> #i ...

  10. JSON字符串转换成对象时候 需要有默认构造器 因为这是通过反射创建的 反射是先通过默认构造器创建对象的

    JSON字符串转换成对象时候 需要有默认构造器 因为这是通过反射创建的 反射是先通过默认构造器创建对象的