一、什么是双向数据绑定？

vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。

二、双向数据绑定原理 vue2.0

vue的人都知道 vue2.x实现双向数据绑定的原理是利用Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的，当数据发生改变发出通知。

在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。

属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。

这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的 get 和 set 就是属于存取描述符对象的属性。

然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。
<body><div><input type="text" id="input"><span id="text"></span></div></body><script>var obj = {};Object.defineProperty(obj, 'prop', {get: function () {return val;},set: function (newVal) {val = newVal;document.getElementById('text').innerHTML = val;}});document.addEventListener('keyup', function (e) { obj.prop = e.target.value;});
</script>

三、Vue 3.0使用ES6的新特性porxy

原理：通过ES6的新特性proxy来劫持数据，当数据改变时发出通知
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><input type="text" id="input"><span id="text"></span></div>
</body>
</html>
<script>var obj = {};var newObj= new Proxy(obj, {// target就是第一个参数obj, receive就是返回的obj(返回的proxy对象)get: function (target, key, receive) {// 返回该属性值return target[key];},set: function (target, key, newVal, receive) {// 执行赋值操作target[key] = newVal;document.getElementById('text').innerHTML = target[key];}})document.addEventListener('keyup', function (e) {newObj[0] = e.target.value;});
</script>
相比于vue2.x，使用proxy的优势如下区别：

1. 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
2. vue3.x可以监听到数组内部数据的变化，不用再去单独的对数组做特异性操作
3. proxy可以劫持整个对象，并返回一个新对象
4. Vue2.x版本中的双向绑定不能检测到下标的变化
5. defineProperty只能监听某个属性，不能对全对象监听

四、思考

问题：在其他博客发现的一个问题，它说既然proxy作为ES6的语法并且还有这么多的优点为啥不在之前2.X版本中就用Proxy?(ES6可比vue2.0版本出现的早)

答：其实还是兼容性的问题，毕竟作为es6的新语法兼容性不好，最主要就是proxy不能用polyfill来兼容（polyfill主要抚平不同浏览器之间对js实现的差异）

【Vue】双向数据绑定原理 vue2.0 与 vue3.0相关推荐

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

【Vue】双向数据绑定原理 vue2.0 与 vue3.0

一、什么是双向数据绑定？

二、双向数据绑定原理 vue2.0

三、Vue 3.0使用ES6的新特性porxy

四、思考

【Vue】双向数据绑定原理 vue2.0 与 vue3.0相关推荐

最新文章

热门文章