Vue.js的双向绑定原理

旭氏美术馆

已于 2024-03-01 16:49:22 修改

阅读量297

点赞数 3

分类专栏： VUE.JS 文章标签： vue.js 前端 javascript

于 2024-03-01 16:48:29 首次发布

本文链接：https://blog.csdn.net/ChenXvYuan_001/article/details/136399782

版权

VUE.JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细解释了Vue2和Vue3中双向绑定的工作原理，分别通过Object.defineProperty和ES6Proxy的defineProperty方法实现，并提供了示例代码展示两者在视图层的应用。

摘要由CSDN通过智能技术生成

Vue的双向绑定

vue双向绑定是其最重要的核心亮点，其原理也很简单，这里做个简单总结

vue2的双向绑定是利用的Object.defineProperty
vue3的双向绑定是利用的
ES6Porxy中的defineProperty(target, propKey, propDesc
其作用类似于Object.defineProperty

下面写一下两种原理的简单代码

用于直观展示双向绑定的视图层（view） html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
  
<body>
  <input id="input"/>
  <p id="output"></p>
</body>
</html>

vue2的双向绑定

let obj={
  message:"12"
}
Object.defineProperty(obj,"message",{
  get:function(){
  	return this._message
  },
  set:function(newValue){
  	this._message=newValue
    document.getElementById("output").innerHTML=newValue
  }
  
})

document.getElementById("input").addEventListener('input',(event)=>{
  obj.message=event.target.value
})

代码主要对对象的set过程进行劫持，将其与view层绑定

vue3的双向绑定

let obj={
  message:"12"
}
const newObj=new Proxy(obj,{
  get:function(target,propKey,rev){
    return Reflect.get(target,propKey)
  },
  set:function(target,propKey,value){
    Reflect.set(target,propKey,value)
    document.getElementById("output").innerHTML=value
  }
})

document.getElementById("input").addEventListener('input',(event)=>{
  newObj.message=event.target.value
})