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

目录

前言

一、vue2双向绑定原理？

二、vue3双向绑定原理？

总结

---

---

前言

随着vue3的发布，很多企业已经开始用vue3开发项目了，那么面试中也会经常被问道vue2和vue3的区别，今天就vue响应式原理来讲一讲两者的区别。

---

一、vue2双向绑定原理？

如果你搜索一下这个问题，绝大多数都会这样回答你：

是通过数据劫持结合发布订阅模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。
 

昂~~~~所以这道理是什么意思呢?

我们来亲身体验一下把~

首先明确需求：

        1.输入框变化是，展示文本一起变化

        2.按钮变化是输入框和展示文本都变化

好啦，上代码

    
    



    
    

    点一下可以改变值哟

看效果~

 

 根据以上代码，我们可以看出vue2的双向绑定主要运用

Object.defineProperty（）函数实现取值和设置值，这个时候大家再去看最开始的原理，是不是更能理解拉~

二、vue3双向绑定原理？

我们会发现，

Object.defineProperty()指定了对象、对象里面的具体属性

这样会存在一个问题，不知道大家在实际开发中有没有遇见

新增、修改对象里面的某个属性，视图不会立即变化，这是为什么呢 ？

因为视图在更新的第一次会给对象加上getter\setter，如果你新增、或修改了对象里面的属性，Object.defineProperty()这个函数实际上是没有指定新增的这个属性的，所以无法实现双向绑定~

所以，为了解决这个问题，vue3改变的双向绑定实现的方式，运用proxy来实现~

还是一样的需求，我们使用proxy来实现试试~

    
    



    
    

    点一下可以改变值哟

 可以看到，proxy只接受一个对象，而不指定某个属性，从而避免了上面哪个问题~

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了vue2和vue3的双向绑定原理~，希望对你有帮助。