Vue 双向数据绑定原理

原理

1、vue双向数据绑定原理，又称vue响应式原理，是vue的核心，双向数据绑定是通过数据劫持结合发布者订阅者模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变

2、vue实现双向数据绑定的核心是Object.defineProperty()方法

3、Object.defineProperty(obj, prop, descriptor)方法，接收三个参数，分别为obj（定义其上属性的对象）prop（定义或修改的属性）descriptor（具体的改变方法），就是用这个方法来定义一个值，当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法

具体步骤：

第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步： Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步： MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

Vue 双向数据绑定原理相关推荐

vue双向数据绑定原理分析--Mr.Ember
vue双向数据绑定原理分析摘要 vue常用,但原理常常不理解,下面我们来具体分析下vue的双向数据绑定原理. (1)创建一个vue对象,实现一个数据监听器observer,对所有数据对象属性进行监听 ...
vue双向数据绑定原理 1
1. 原理 1.1 vue双向数据绑定原理,又称vue响应式原理,是vue的核心,双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化 ...
分析Vue双向数据绑定原理以及简单实现MVVM
前言随着Vue的火热发展,越来越多的程序员并不满足于对框架的使用,更多地追求其内在的原理,就像不能沉沦于美丽的外表,更应该追求灵魂的高度. 正文好了,废话不多说,接下来我们将通过俩方面开展我们对外 ...
“别具一格”的vue双向数据绑定原理
背景和一点点看法见网上许多文章讲vue双向数据绑定一开口就大谈 Object.defineProperty 和 proxy.其实不然.这是vue中响应式的"基石". vue 中有 ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
理解VUE双向数据绑定原理和实现
一.原理: 1.vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变: 2.核心:关于VUE双向数 ...
vue双向数据绑定原理学习
vue源码 1.双向数据绑定学习数组的reduce函数 var arr = [2,4,5,67,78,5,1] // arr.reduce(函数,初始值) // arr.reduce((上次的初始值 ...
vue双向数据绑定原理
什么是双向数据绑定?Vue是一个MVVM框架,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化. 实现数据绑定的方式大致有以下几种: - 1.发布者-订阅者 ...
面试题请简述vue双向数据绑定原理
MVVM模式 MVVM模式就是Model–View–ViewModel模式.它实现了View的变动,自动反映在 ViewModel,反之亦然.就是在单向绑定的基础上给可输入元素(input.texta ...

Vue 双向数据绑定原理

Vue 双向数据绑定原理相关推荐

最新文章

热门文章