目录
前言
随着vue3的发布,很多企业已经开始用vue3开发项目了,那么面试中也会经常被问道vue2和vue3的区别,今天就vue响应式原理来讲一讲两者的区别。
一、vue2双向绑定原理?
如果你搜索一下这个问题,绝大多数都会这样回答你:
是通过数据劫持结合发布订阅模式的方式来实现的,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变。
昂~~~~所以这道理是什么意思呢?
我们来亲身体验一下把~
首先明确需求:
1.输入框变化是,展示文本一起变化
2.按钮变化是输入框和展示文本都变化
好啦,上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text">
<p></p>
<button>点一下可以改变值哟</button>
</div>
<script>
//获取元素信息
const inputText = document.getElementsByTagName('input')[0]
const showText =document.getElementsByTagName('p')[0]
const changeButton =document.getElementsByTagName('button')[0]
var data = {text:''}//共用的值
// 监听输入事件
inputText.addEventListener('input',function(e){
data.text =e.target.value
}),
//按钮点击事件
changeButton.onclick=function(){
data.text = "改变了~"
},
//双向绑定原理~
Object.defineProperty(data,'text',{
get:function () {
return data['text']
},
set:function (newVal) {
// 同步输入框和展示文字
showText.innerText = newVal,
inputText.value = newVal
}
})
</script>
</body>
</html>
看效果~
根据以上代码,我们可以看出vue2的双向绑定主要运用
Object.defineProperty()函数实现取值和设置值,这个时候大家再去看最开始的原理,是不是更能理解拉~
二、vue3双向绑定原理?
我们会发现,
Object.defineProperty()指定了对象、对象里面的具体属性
这样会存在一个问题,不知道大家在实际开发中有没有遇见
新增、修改对象里面的某个属性,视图不会立即变化,这是为什么呢 ?
因为视图在更新的第一次会给对象加上getter\setter,如果你新增、或修改了对象里面的属性,Object.defineProperty()这个函数实际上是没有指定新增的这个属性的,所以无法实现双向绑定~
所以,为了解决这个问题,vue3改变的双向绑定实现的方式,运用proxy来实现~
还是一样的需求,我们使用proxy来实现试试~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text">
<p></p>
<button>点一下可以改变值哟</button>
</div>
<script>
//获取元素信息
const inputText = document.getElementsByTagName('input')[0]
const showText =document.getElementsByTagName('p')[0]
const changeButton =document.getElementsByTagName('button')[0]
var data = {text:''}//共用的值
function modeChange() {
showText.innerText =data.text
inputText.value = data.text
}
//vue3双向绑定原理~
const obj = new Proxy(data,{
get(target,key){
return target[key]
},
set(target,key,newValue){
target[key] = newValue
modeChange()
return true
}
})
//按钮点击事件
changeButton.onclick=function(){
obj.text = "改变了~"
}
// 监听输入事件
inputText.addEventListener('input',function(e){
obj.text =e.target.value
})
</script>
</body>
</html>
可以看到,proxy只接受一个对象,而不指定某个属性,从而避免了上面哪个问题~
总结
以上就是今天要讲的内容,本文仅仅简单介绍了vue2和vue3的双向绑定原理~,希望对你有帮助。