vue 双向绑定原理

官网–https://cn.vuejs.org/v2/guide/reactivity.html

1、vue双向数据绑定是 通过数据劫持并结合发布-订阅模式的方法来实现的。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。
2、其中 数据劫持 是通过 Object.defineProperty() 方法实现的。vue 在内部会把定义在 data 中的属性通过这个方法全部转为 getter/setter。

上图中，每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter（发布者发布数据） 触发时，会通知 watcher（消息中心Broker），从而使它关联的组件重新渲染。

发布订阅模式----https://blog.csdn.net/weixin_43842373/article/details/121975015?spm=1001.2014.3001.5501

检测变化的注意事项

由于数组和对象是引用类型，Vue 不能检测数组和对象的变化。但是依然可以通过一些特殊方法来解决这个问题。

对于对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：

var vm = new Vue({data:{a:1 // 响应式}
})
vm.b = 2   // 非响应式

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向 嵌套对象 添加响应式 property。如下：

this.$set(vm.someObject, 'b', 2)

有时你可能需要为已有对象赋值多个新 property，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

对于数组

Vue 不能检测以下数组的变动：

1、当你利用索引直接设置一个数组项时，例如：this.items[indexOfItem] = newValue
2、当你修改数组的长度时，例如：this.items.length = newLength

例如：

var vm = new Vue({data: {items: ['a', 'b', 'c']}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

对于第一类问题，可以用一下两种方案解决：

this.$set(vm.items, indexOfItem, newValue)
// 或
this.items.splice(indexOfItem, 1, newValue)

对于第二类问题：

this.items.splice(newLength)

实现一个简单的数据双向绑定

<input type="text"><p></p><script>window.onload = function () {const input = document.querySelector('input')   // 发布者const p = document.querySelector('p')   // 订阅者window.data = ''  // 要双向绑定的数据Object.defineProperty(window, 'data', {get: function() {return data},set: function(value) {  // 数据劫持，订阅者函数，更新 DOMp.innerText = value}})input.onkeyup = (e) => {   // onkeyuo与setter 共同形成事件中心 brokerwindow.data = input.value // 发布数据}}</script>

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

this指向-作用域、作用域链-预解析变量提升-Vue组件传值父子子父非父子-Vue数据双向绑定原理
目录 this指向作用域.作用域链预解析变量提升 Vue组件传值父子子父非父子 Vue数据双向绑定原理 1.this指向函数的this指向看调用.不看声明 (1)普通函数调用 ①函数名 ...
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
Vue数据双向绑定原理（vue2向vue3的过渡）
众所周知,Vue的两大重要概念: 数据驱动组件系统接下来我们浅析数据双向绑定的原理一.vue2 1.认识defineProperty vue2中的双向绑定是基于defineProperty的ge ...
vue的双向绑定原理及实现
前言使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
vue数据双向绑定的原理
vue数据双向绑定的原理一复习闭包 1 闭包含义: 当函数嵌套时,内部函数使用了外部函数的变量,就会产生闭包当函数可以记住并访问自己的作用域时,就会产生闭包 2 闭包注意点 ① 队列里的代码执行 ...
记录vue的双向绑定原理及实现
这里写自定义目录标题思路分析实现过程 1.实现一个Observer 2.实现Watcher 此文章是学习以为大神____chen的 <vue的双向绑定原理及实现> vue数据双向绑定是 ...
vue 的双向绑定原理
目录一.一句话描述 vue 的双向绑定原理二.细说 vue 的双向绑定原理 1.vue 2.x 的双向绑定 2.vue 3.x 的双向绑定 3.一个完整的案例一.一句话描述 vue 的双向绑定原 ...
基于Vue2.0数据双向绑定原理-详解
在线使用-线上测试-源码 //代码: <div id="app"><input v-model="name" type="text& ...
小猿圈解析vue数据双向绑定的缺点
vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...

vue数据双向绑定原理