简述Vue2和Vue3的区别

上铺的老家伙

已于 2023-07-13 22:44:15 修改

阅读量173

点赞数

文章标签：前端 javascript vue.js

于 2023-07-12 22:54:01 首次发布

本文链接：https://blog.csdn.net/qq1319504645/article/details/131691801

版权

从Vue2过渡到Vue3开发,总结一下两者的区别

所谓选项式:在代码中的体现就是:

选项式API是Vue.js 2中常用的API风格。它基于组件选项对象，将组件的逻辑和模板结合在一起。使用选项式API，你可以在组件定义中通过各种选项来描述组件的行为，如data、methods、computed、watch等。这种风格描述简单、清晰，适用于较小的单一组件。

组合式:没有data.通过setup 语法糖,我们可以在任意地方定义数据,

组合式 API 是根据逻辑相关性组织代码的，提高可读性和可维护性，基于函数组合的 API 更好的重用逻辑代码.

就是把跟一个功能相关的东西放在一个地方，它是目前最合理也是最容易维护的，你可以随时将功能的一部分拆分出去，你可以将每一个功能相关所有的东西比如methods，computed都放在同一个地方维护,

<script setup>
  const message = 'this is message'
  const logMessage = ()=>{
    console.log(message)
  }
</script>

1.diff算法当data发生改变会根据新的数据生成一个新的虚拟dom ，新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法

2.vue3是将变量赋值flag1，不变的值赋值flag，只会对比变动的值，相比Vue2性能更嘉

从Vue2过渡到Vue3很多人最大的感受就是开局import.Vue3的按需引入使得相比Vue2的项目,Vue3项目体积会更小

1.vue2通过 Object.defineProperty 遍历对象的每一个属性，把每一个属性变成一个 getter 和 setter 函数，读取属性的时候调用 getter，给属性赋值的时候就会调用 setter.

在vue2的响应式中，存在着新增属性，删除属性以及直接通过下标修改数组，但页面不会自动更新的问题。但是在Vue3中，这些问题都得以解决。

2.vue3通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写，属性的增加，属性的删除等。

关注