Vue2.x和Vue3.x的双向绑定原理详解
双向的绑定的原理
通过Object.defineproperty()重新定义对象属性的set方法、get方法来实现的，从这个属性中取值时会触发get方法，改变这个属性时会触发set方法，所以我们只要将一些需要更新view的方法放在这里面就可以实现data更新view了,而view更新data其实可以通过事件监听实现
当视图上的数据发生改变时， data 中的数据也发生改变当 data 中的数据发生改变时，视图中的数据也发生改变 Object.defineProperty()
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
语法：Object.defineProperty(obj, prop, descriptor)
参数：
- obj
要定义属性的对象。 - prop
要定义或修改的属性的名称或 Symbol 。 - descriptor
要定义或修改的属性描述符。
返回值
被传递给函数的对象。
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者。
作用
* 可以给对象的一个属性设置两个方法：
* get：从这个属性中取值时会触发get方法
* set：给这个属性赋值时会触发set方法
let obj = {}
// 给obj的name属性设置两个方法get&set
Object.defineProperty(obj,'name',{
set:function (value){//value就是给name赋值的结果
console.log('触发了set');
this._name=value//保存这个值 这里不能直接用name,因为会触发set
},
get:function(){
console.log('触发了get');
// 将保存的值返回回来
return this._name
}
})
在给name属性赋值的时候触发set方法，在set方法中将值存起来
取值时触发get方法，在get方法中将值返回回来
vue2.x双向绑定原理
<!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>
<!-- 这里相当于V -->
<div id="v"></div>
<input type="text" id="ipt">
</body>
<script>
// MVVM：
// 当V改变，M自动改变
// 当M改变，V自动改变
// 这里相当于M
let data = {}
// 给data中的name属性设置两个方法get ，set
Object.defineProperty(data,'name',{
set:function(value){
// 当M改变时，V自动改变
document.querySelector('#v').innerHTML = value
},
get:function(){
return this._name
}
})
// 给input添加一个内容改变的之后会触发的事件
document.querySelector('#ipt').oninput = function(e){
data.name = e.target.value
}
</script>
</html>
一旦输入框中的内容发生改变，就会触发oninput事件马上改变data中的内容，一旦data中的name发生改变就会触发set方法将最新的值赋值给v，这样就实现了数据的双向绑定
vue3.x双向绑定原理
Vue3.x是通过proxy（代理）实现的数据的双向绑定
proxy
跟Object.defineProperty一样也可以给对象的属性添加两个方法get&set
区别：
- Object.defineProperty一次性只能给对象的一个属性添加get&set方法
- Proxy:一次性给对象所有属性都设置get&set方法
用法：
- 创建一个新的proxy对象
let p = new Proxy(obj,{get:function(){},set:function(){}})
<script>
let obj = {}
let p = new Proxy(obj,{
get:function(obj,prop){
//obj :被代理的对象 prop:要操作的属性
console.log('触发了get');
return obj[prop]
},
set:function(obj,prop,value){
// obj:被代理的对象
// prop要赋值的属性
// value要赋值的结果
console.log('触发了set');
// 将赋值的结果保存起来
obj[prop] = value
}
})
</script>
vue3.x实现数据的双向绑定
总结
到此这篇关于Vue2.x和Vue3.x的双向绑定原理的文章就介绍到这了,更多相关Vue2.x和Vue3.x双向绑定原理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue+iview 实现可编辑表格的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章给大家介绍Vue单页应用如何引用单独的样式文件，本文以css文件为例，通过两种方式给大家介绍的非常详细，需要的朋友参考下吧2018-03-03
这篇文章主要介绍了vue中elementUI表单循环验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要给大家介绍了关于vue3标签中的ref属性详解及如何使用$refs获取元素的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-11-11
这篇文章主要为大家详细介绍了Vue如何使用vue-pdf实现PDF文件预览的功能，文中的示例代码讲解详细，具有一定的参考价值，感兴趣的可以了解一下2023-03-03
这篇文章主要介绍了关于vue中路由的跳转和参数传递，参数获取方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
本地开发一般通过执行npm run serve命令来启动项目,那这行命令到底存在什么魔法?下面这篇文章主要给大家介绍了关于vue执行配置选项npm run serve的本质的相关资料,需要的朋友可以参考下2023-05-05
Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus是基于Vue3面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型2022-12-12
这篇文章主要介绍了在Vue3中实现飘逸的元素拖拽,在本次案例中需要认真思考对应的几个坐标和移动时坐标如何更新，事件的使用要成对出现，如何在这个拖拽的 Icon 上增加点击事件时还需要多做一些处理，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了基于elementUI竖向表格、和并列的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论