面试必问——vue2、vue3双向绑定原理区别？

最新推荐文章于 2024-06-25 16:02:02 发布

DW14687

最新推荐文章于 2024-06-25 16:02:02 发布

阅读量1.4k

点赞数

分类专栏：面试题目文章标签： python pandas 开发语言

本文链接：https://blog.csdn.net/DW14687/article/details/127412815

版权

面试题目专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言

随着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的双向绑定原理~，希望对你有帮助。

DW14687

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
面试必问——vue2、vue3双向绑定原理区别？

随着vue3的发布，很多企业已经开始用vue3开发项目了，那么面试中也会经常被问道vue2和vue3的区别，今天就vue响应式原理来讲一讲两者的区别。一、vue2双向绑定原理？如果你搜索一下这个问题，绝大多数都会这样回答你：是通过数据劫持结合发布订阅模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。
复制链接

扫一扫

专栏目录