vue3双向数据绑定原理_demo
<!DOCTYPE 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><span>{{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;
});
}
/**
self ...
*/
if (/\{\{(.*?)\}\}/.test(node.innerHTML)) {
let ret = /\{\{(.*?)\}\}/.exec(node.innerHTML)
let property = ret[1];
this.publish(new Watcher(node, "innerHTML", data, property));
}
// self end
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>
vue3双向数据绑定原理_demo的更多相关文章
- vue双向数据绑定原理探究(附demo)
昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...
- vue的双向数据绑定原理
原理. vue是采用数据劫持结合发布者-订阅者模式的方式, 通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回 ...
- 深入vue源码，了解vue的双向数据绑定原理
大家都知道vue是一种MVVM开发模式,数据驱动视图的前端框架,并且内部已经实现了双向数据绑定,那么双向数据绑定是怎么实现的呢? 先手动撸一个最最最简单的双向数据绑定 <div> < ...
- Vue双向数据绑定原理深度解析
首先,什么是双向数据绑定?Vue是三大MVVM框架之一,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化. 在分析其原理和代码的时候,大家首先了解如下几个j ...
- Vue双向数据绑定原理分析（转）
add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...
- 手写MVVM框架 之vue双向数据绑定原理剖析
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 16、前端知识点--Object.defineProperty 的用法+双向数据绑定原理解析
一.Object.defineProperty 的用法 Object.defineProperty 可以用于给对象添加更新属性. <script> // Object.defineProp ...
- Vue双向数据绑定原理解析
基本原理 Vue.采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,数据变动时发布消息给订阅者,触发相应函数的回调 ...
- Vue的双向数据绑定原理是什么？
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调. ...
随机推荐
- mpvue 生成字节跳动小程序的问题！！
初始化项目文件 $ vue init mpvue/mpvue-quickstart fuck $ cd fuck $ npm install 这个时候就初始化好了,接下来 $ npm run dev: ...
- openswan协商流程之（六）：main_inI3_outR3()
主模式第六包:main_inI3_outR3 1. 序言 main_inI3_outR3()函数是ISAKMP协商过程中第六包的核心处理函数的入口,第五六包主要用来验证对方的身份信息,同时此报文也是加 ...
- shell脚本之循环语句 for-while-until
目录: 一.for循环语句 二.while循环语句 三.unti循环语句 一.for循环语句 读取不同的变量值,用来逐个执行同一组命令 举例 批量添加用户◆ 用户名存放在users.txt文件中, ...
- 珠峰2016，第9期 vue.js 笔记部份
在珠峰参加培训好年了,笔记原是记在本子上,现在也经不需要看了,搬家不想带上书和本了,所以把笔记整理下,存在博客中,也顺便复习一下 安装vue.js 因为方便打包和环境依赖,所以建意npm init ...
- Java环境搭建与HelloWprld—改变世界的第一步
1． JDK下载 访问oracle官网:http://www.oracle.com 在首页点击Downloads,进入oracle软件下载页. 在下载页面,点击Java. 选择Java (JDK) f ...
- PTA——c++函数
1.在C++中,关于下列设置缺省参数值的描述中,()是正确的. 在指定了缺省值的参数右边,不能出现没有指定缺省值的参数: 2.使用地址作为实参传给形参,下列说法正确的是() 实参与形参操作的是同一对象 ...
- 第一节：《线程安全和锁Synchronized概念》
第一节:线程安全和锁Synchronized概念 一.进程与线程的概念 (1)在传统的操作系统中,程序并不能独立运行,作为资源分配和独立运行的基本单位都是进程. 在未配置 OS 的系统中,程序的执行方 ...
- TP5 数据保存、更新问题(save、saveAll)
一.今天写项目的时候,突然发现一个坑爹的问题,使用saveAll新增多条数据,但是一直提示缺少更新条件,然而我发现代码里面并没有更新,而且saveAll我仅仅是去新增多条数据而已 原来源码 模型类中有 ...
- Nginx系列（1）- Nginx简介
公司产品出现瓶颈 公司项目刚上线的时候,并发量小,用户使用少,所以在低并发的情况下,一个jar包启动应用就够了,然后内部tomcat返回内容给用户 但是慢慢的,使用平台的用户越来越多,并发量慢慢增大了 ...
- Jmeter系列（29）- 性能指标(2) | 并发数
并发数 概念 同时承载正常使用系统功能的用户数量:系统能够同时处理请求的数目. 通过问题详解 问题:网站的并发数,究竟指的同时提交请求的用户数目,还是用户同时提交的请求的数目? 答案:根据这句描述&q ...