proxy vue3.0
<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的更多相关文章
- Vue3.0 响应式数据原理：ES6 Proxy
Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...
- 预计2019年发布的Vue3.0到底有什么不一样的地方？
摘要: Vue 3.0预览. 原文:预计今年发布的Vue3.0到底有什么不一样的地方? 作者:小肆 微信公众号:技术放肆聊 Fundebug经授权转载,版权归原作者所有. 还有几个月距离 vue2 的 ...
- VUE3.0升级与配置（跨域、全局scss变量等）
1.检查本机vue版本 vue -V 2.升级vue3.0命令 npm install -g @vue/cli 3.创建完项目后,在项目根目录新增vue.config.js文件,插入代码(简洁) mo ...
- vue3.0中的双向数据绑定方法
熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.definePrope ...
- vue3.0和2.0的区别，Vue-cli3.0于 8月11日正式发布，更快、更小、更易维护、更易于原生、让开发者更轻松
vue3.0和2.0的区别Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快.更小. ...
- Vue3.0 Function API---------引用
1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...
- Proxy-代理器（预计vue3.0实现双向绑定的方式）
todo 常见的基于数据劫持的双向绑定有两种实现,一个是目前Vue在用的Object.defineProperty,另一个是ES2015中新增的Proxy,而Vue的作者宣称将在Vue3.0版本后加入 ...
- 快速进阶Vue3.0
在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版. 可以直接看 github源码. 新版Vue 3.0计划并已实现的主要架构改 ...
- Vue3.0初体验
最近看了Vue3.0的相关信息,相比Vue2.0有以下优点: Performance:性能更比Vue 2.0强. Tree shaking support:可以将无用模块"剪辑", ...
随机推荐
- USACO 1.3.3 Calf Flac（Manacher算法）
Description 据说如果你给无限只母牛和无限台巨型便携式电脑(有非常大的键盘),那么母牛们会制造出世上最棒的回文.你的工作就是去寻找这些牛制造的奇观(最棒的回文). 在寻找回文时不用理睬那些标 ...
- Kotlin 学习笔记（一）
(Kotlin 学习笔记的文档结构基本按照 Java 核心技术一书的目录排列) 基本程序设计结构 数据类型 数字 类型 宽度 Double 64 Float 32 Long 64 Int 32 Sho ...
- txt文件存储问题
一.实际大小与占用空间不一致: 1.占用空间和磁盘有关,一般磁盘存储最小大小为4kb(4096字节). 2.当txt文件中仅有1个数字‘5’的时候,大小显示为1个字节(属性看,列表详细不精确),占用空 ...
- 常用IDE插件
Visual Studio 常用 Refactoring Essentials:代码重构分析 Roslynator:代码重构 CodeMaid:代码格式化 Github Extension for V ...
- iOS- 指压即达，如何集成iOS9里的3D Touch
1.前言 随着6S的到来,3DTouch被各大热门APP迅速普及,博主亲自体验后,发现使用便捷性大幅提高,随后自己照着文档,写了个Demo出来,分享给大家,希望能对有需要的朋友提供有一些帮助. 2 ...
- 技嘉主板+AMD CPU开启CPU虚拟化方法
硬件环境:技嘉AB350+AMD Ryzen 5 1600X 由于安装虚拟机的需要,所以要开启CPU的虚拟化. 首先进入BIOS. 然后如图:(M.I.T-高级频率设定-CPU超频进阶设置-SVM M ...
- winform 弹出窗体指定位置
在启动一个程序时,我们希望窗口显示的位置处于屏幕的正中心,可以如下设置: MainForm mainForm = new MainForm(); mainForm.StartPosition = Fo ...
- Haproxy + Rabbit 集群 简要介绍
# 两台主机都安装上rabbitMQ yum install -y rabbitmq-server # 两台主机都配置/etc/hosts文件 192.168.23.10 rabbitmq1 19 ...
- linux & zip & tar
linux & zip & tar https://zzk.cnblogs.com/s?w=blog%3Axgqfrms%20zip # zip -r 递归 file_name.zip ...
- 【前端学习笔记05】JavaScript数据存储Cookie相关方法封装
//Cookie设置 //设置新cookie function setCookie(name,value,duration){ var date = new Date(); date.setTime( ...