Vue双向绑定的实现原理及简单实现
vue数据双向绑定原理
vue数据双向绑定是通过(数据劫持)+(发布者-订阅者模式)的方式来实现的,而所谓的数据劫持就是通过Object.defineProperty()
来实现的,所谓的Object.defineProperty( )是用来做什么的?简单点来说就是给一个对象添加get和set方法,在我们通过类似于obj.
attribute获取属性的时候会调用get方法,通过obj.attribute = ***设置属性的时候会调用set方法,我们通过重写这个get,set方法就可以达到我们
不可告人的目的-实现数据劫持。
举个栗子:
var Person= {}
var name = '';
Object.defineProperty(Person, 'name', {
set: function (value) {
name = value;
console.log('这个人的名字叫:' + value);
},
get: function () {
return '<' + name + '>'
}
}) Person.name = 'vue'; //访问属性调用set方法输出:这个人的名字叫vue
console.log(Person.name); //设置属性调用set方法得到:<vue>
接下来我们来简单分析实现一个vue的双向绑定:
实现分析
我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:
1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
3.实现一个消息订阅器Dep,专门统计管理订阅者,并且每一个监听的属性持有一个dep的引用,在属性变化后通过dep去更新Watcher,从而更新师徒。
4.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。
流程图如下:
具体实现
github链接:vue数据双向绑定原理分析和简单实现
参考博客:http://www.cnblogs.com/libin-1/p/6893712.html
Vue双向绑定的实现原理及简单实现的更多相关文章
- Vue双向绑定的实现原理系列(一):Object.defineproperty
了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...
- Vue双向绑定的实现原理系列(三):监听器Observer和订阅者Watcher
监听器Observer和订阅者Watcher 实现简单版Vue的过程,主要实现{{}}.v-model和事件指令的功能 主要分为三个部分 github源码 1.数据监听器Observer,能够对数据对 ...
- 梳理vue双向绑定的实现原理
Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...
- Vue双向绑定的实现原理系列(四):补充指令解析器compile
补充指令解析器compile github源码 补充下HTML节点类型的知识: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 N ...
- 最近老是有兄弟问我,Vue双向绑定的原理,以及简单的原生js写出来实现,我就来一个最简单的双向绑定,原生十行代码让你看懂原理
废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object ...
- Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- vue双向绑定的原理及实现双向绑定MVVM源码分析
vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...
- Vue双向绑定原理,教你一步一步实现双向绑定
当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
随机推荐
- CF191C Fools and Roads - 树剖解法
Codeforces Round #121 (Div. 1) C. Fools and Roads time limit per test :2 seconds memory limit per te ...
- 指定文件或文件夹直接提交到svn指定目录
我这里先说两种方法第一种:1.先将那个目录checkout下来2.将要添加的文件或者文件夹放到这个目录中3.右击文件执行svn菜单中的add命令4.右击文件执行svn菜单中的commit命令第二种:如 ...
- java语言课堂动手动脑
1 运行 TestInherits.java 示例,观察输出,注意总结父类与子类之间构造方法的调用关系修改Parent构造方法的代码,显式调用GrandParent的另一个构造函数,注意这句调用代码是 ...
- Spring Boot教程(六)在springboot中验证表单信息
构建工程 创建一个springboot工程,由于用到了 web .thymeleaf.validator.el,引入相应的起步依赖和依赖,代码清单如下: <dependencies> &l ...
- 基于 Golang 完整获取百度地图POI数据的方案
百度地图为web开发者提供了基于HTTP/HTTPS协议的丰富接口,其中包括地点检索服务,web开发者通过此接口可以检索区域内的POI数据.百度地图处于数据保护对接口做了限制,每次访问服务,最多只能检 ...
- Oracle-RAC sysdate和current_date时间不一致,导致客户端连接时间延迟
[oracle@oracle-db1 ~]$ dateTue Oct 10 14:20:56 CST 2017[oracle@oracle-db1 ~]$ cat /etc/sysconfig/clo ...
- es索引基本操作(2)之 索引映射(mappings)管理和索引库配置管理(settings)
1:索引的映射管理 elasticsearch中的文档等价于java中的对象 , 那么在java对象中有字段(比如string.int.long等): 同理在elasticsearch索引中的具体字段 ...
- [LeetCode]-algorithms-Add Two Numbers
You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...
- Vue 中 双向绑定数据
1.文本 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- leetcode-easy-array-283 move zeros
mycode 77.24% class Solution(object): def moveZeroes(self, nums): """ :type nums: Li ...