vue数据双向绑定原理
vue的数据双向绑定的小例子：
。html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf->
<title>vue数据双向绑定原理</title>
</head>
<body>
<h1 id="name"><<<<name>>>>>></h1>
</body>
<script src="testvuejs/observer.js"></script>
<script src="testvuejs/watcher.js"></script>
<script src="testvuejs/index.js"></script>
<script type="text/javascript">
var ele = document.querySelector('#name');
var selfVue = new SelfVue({
name: 'hello world'
}, ele, 'name');
window.setTimeout(function () {
console.log('name值改变了');
selfVue.name = 'canfoo';
}, );
</script>
</html>
index.js
function SelfVue (data, el, exp) {
var self = this;
this.data = data;
//把data里的key直接绑定到this对象上
Object.keys(data).forEach(function(key) {
self.proxyKeys(key);
});
//对data的每一层级的属性进行监听，如果变化执行notify
observe(data);
// 初始化模板数据的值
el.innerHTML = this.data[exp];
new Watcher(this, exp, function (value) {
el.innerHTML = value;
});
return this;
}
SelfVue.prototype = {
proxyKeys: function (key) {
Object.defineProperty(this, key, {
enumerable: false,
configurable: true,
get: ()=> {
return this.data[key];
},
set: (newVal)=> {
this.data[key] = newVal;
}
});
}
}
observer.js
function Observer(data) {
this.data = data;
this.walk(data);
}
Observer.prototype = {
walk: function(data) {
var self = this;
Object.keys(data).forEach(function(key) {
self.defineReactive(data, key, data[key]);
});
},
defineReactive: function(data, key, val) {
var dep = new Dep();
//对二级三级子属性...进行监听尽
observe(val);
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
if (Dep.target) {
dep.addSub(Dep.target);
}
return val;
},
set: function(newVal) {
if (newVal === val) {
return;
}
val = newVal;
dep.notify();
}
});
}
};
function observe(value, vm) {
if (!value || typeof value !== 'object') {
return;
}
return new Observer(value);
};
function Dep () {
this.subs = [];
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
notify: function() {
this.subs.forEach(function(sub) {
sub.update();
});
}
};
Dep.target = null;
watcher.js
function Watcher(vm, exp, cb) {
this.cb = cb;
this.vm = vm;
this.exp = exp;
//当new一个对象的时候，立即执行get方法，Dep的target为Watcher自己
this.value = this.get(); // 将自己添加到订阅器的操作
}
Watcher.prototype = {
update: function() {
this.run();
},
run: function() {
var value = this.vm.data[this.exp];
var oldVal = this.value;
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value);
}
},
get: function() {
Dep.target = this; // 缓存自己
var value = this.vm.data[this.exp] // this.vm.data[this.exp]:强制执行监听器里的get函数，使自己（Watcher {cb: ƒ, vm: SelfVue, exp: "name"}）被添加上
Dep.target = null; // 释放自己
return value;
}
};
原理：当new vue后，将data属性直接给vm添加上，将属性的每一级进行set get 当set新值时通知notify函数。执行 new watcher ，强制执行data的get 使watch被添加上。
当data set新值时，触发notify函数，使所有watcher都执行update，watcher的update时，本地的value是旧值，取新值，回调函数更新view。
vue数据双向绑定原理的更多相关文章
- 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- Vue数据双向绑定原理（vue2向vue3的过渡）
众所周知,Vue的两大重要概念: 数据驱动 组件系统 1 2 接下来我们浅析数据双向绑定的原理 一.vue2 1.认识defineProperty vue2中的双向绑定是基于definePropert ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- vue数据双向绑定的原理、虚拟dom的原理
vue数据双向绑定的原理https://www.cnblogs.com/libin-1/p/6893712.html 虚拟dom的原理https://blog.csdn.net/u010692018/ ...
- 对象的属性类型 和 VUE的数据双向绑定原理
如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty() //IE9+ 和标准浏览器 支持 查看属性的 ...
- vue的双向绑定原理解析（vue项目重构二）
现在的前端框架 如果没有个数据的双向/单向绑定,都不好意思说是一个新的框架,至于为什么需要这个功能,从jq或者原生js开始做项目的前端工作者,应该是深有体会. 以下也是个人对vue的双向绑定原理的一些 ...
- vue的双向绑定原理浅析与简单实现
很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现. ...
随机推荐
- [转]OpenStack Keystone V3
Keystone V3 Keystone 中主要涉及到如下几个概念:User.Tenant.Role.Token.下面对这几个概念进行简要说明. User:顾名思义就是使用服务的用户,可以是人.服务或 ...
- PostgreSQL9.4如何指定数据库schema
在PostgreSQL中数据库可以有多个schema,在程序访问的时候如果不做特殊的设置,默认连接的是名为public的schema. 那么,如何设置能够让程序去访问特定的schema呢?之前在网上找 ...
- Particle 粒子效果使用(适配微信小游戏，particle is not defined)
在微信小游戏中使用粒子效果 参考: 1. 粒子库下载地址 2. 粒子官方使用教程 3. 水友解决微信小游戏particle is not defined 一.下载第三方库 Git地址:https:// ...
- AD添加LOGO的方法
1 将logo图片转换成单色的BMP 图像.简单的方法是使用Windows自带的画图程序,在将图片另存为时, 在文件类型下拉列表中选择单色.bmp即可.我们以Altium为例,如图所示将蓝色logo另 ...
- oracle fm格式化
select to_char(0.56,'FM999,999,990.00' ) from dual 其中 9代表如果存在数字则显示数字,不存在显示空格 其中 0代表如果存在数字则显示数字,不存在则显 ...
- backBone.js初识
一.单页面应用 1.单页面应用(single-page application :SPA),是指在浏览器中运行的应用,在使用期间不会重新加载页面. 2.它所有的活动局限于一个Web页面,仅在初始化加载 ...
- vue--父子组件的传值
什么是父子组件? 组件中引入组件,被引入的组件就是子组件.例如在 Hello.vue 组件中引入 Header.vue 组件,那么 Hello.vue 就是父组件,Header.vue就是子组件. 一 ...
- Java clone克隆方法 --深拷贝--浅拷贝 --原型模型
什么是深拷贝? 什么是浅拷贝? 创建一个对象的方法有几种? 默认的Object方法中的clone是深拷贝还是浅拷贝? 为什么说很多深拷贝都是不彻底的深拷贝? 什么是原型模型,什么是原型模式? 原型模型 ...
- Ubuntu16.04 安装lamp环境
拿到新装的ubuntu16.04新系统 首先 apt-get update 更新一下 我这里是root用户,如果您不是超级管理员,命令前加sudo即可 如果您加了sudo也不好使,那就联系管理员,给你 ...
- win10拖拽的问题
以前很多可以支持托砖的到了win10都不行了 解决 按Windows键+R,打开“运行”对话框:输入regedit,回车或确定. 依次找到以下键值HKEY_LOCAL_MACHINE\SOFTWA ...