浅谈vue2.0和vue3.0

最新推荐文章于 2023-08-17 08:28:49 发布

置顶 lx392118613

最新推荐文章于 2023-08-17 08:28:49 发布

阅读量356

点赞数

文章标签：前端 javascript vue.js

原文链接：https://blog.csdn.net/u014645827/article/details/125781194

版权

vue2与vue3的区别

更小

vue2采用的是面向对象编程，vue3采用函数式编程

更快

vue3修改了细腻dom算法，只针对变化的层进行diff，而vue2是对所有的dom进行diff

加强typescript支持

api一致性

提高可维护能力

开放更多底层功能

把更多的底层功能开放出来，比如render，依赖收集功能。

数据双向绑定

vue2使用的是definedOroperty，vue3使用的是proxy

vue3使用proxy的优点

使用proxy不污染源对象，会返回一个新对象，defineProperty是注入型的，会破坏源对象。
使用proxy只需要监听整个源对象的属性，不需要循环使用Object.definedProperty监听对象的属性。
使用proxy可以获取到对象属性的更多参数，使用definedProperty只能获取到监听属性的新值newValue。

创建vue实例

vue2：new Vue({})
vue3: vue.createApp({})

根节点

vue3是允许有多个根节点的，即template里面可以同时写多个节点并列，而vue2只能有一个根节点，在根节点里面再去添加其他节点。
在给组件上编写class名时，由于组件中可以有多个根节点，那么需要定义哪部分将接收这个class。可以使用$attrs组件property执行此操作。

image.png

vue3中的组合式api

setup

vue3中为什么新增了setup？

可以把业务相关的代码放在同一个位置来写。将同一个逻辑关注点相关代码收集在一起会更好的阅读和维护。组合优于继承！

image.png

在哪里使用？

setup是vue3新增的生命周期函数，他存在于created和beforeCreated之间。使用组合式API更符合大型项目的开发，通过setup可以将该部分抽离成函数。所以在执行setup的时候还没有进行项目的初始化，就不能访问data或者是methods中的数据和方法，this是undefined。

一旦props被解析，就将作为组合式api的入口。
怎么使用？

setup选项是一个接收props和context的函数。

setup内部可以定义数据和方法，如果想在模板中使用，必须要通过return进行返回，暴露给组件的其余部分（计算属性、方法、生命周期钩子等等）以及组件的模板。

vue3中的setup之props

背景

因为props是响应式的，所以不能使用ES6解构，会消除prop的响应性，如果需要解构prop，可以在setup函数中使用toRefs。

使用toRefs和toRef的区别：
- 如果想要解构全部的可以使用toRefs（返回对象中所有属性都是响应式的，但是会耗性能）
- 解构其中的某个属性可以用toRef（将对象的某一个属性作为引用返回）

image.png

vue3中的context

context是一个普通的javascript对象，也就是说，他不是响应式的，可以安全的对context使用es6解构。

image.png

ref

带ref的响应式变量

a. 在3.0中，可以通过一个新的ref函数使任何响应式变量在任何地方起作用。

b. ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值。

c. 将值封装在一个对象中，看似没有必要，但为了保持 JavaScript 中不同数据类型的行为统一，这是必须的。这是因为在 JavaScript 中，Number 或 String 等基本类型是通过值而非引用传递的。ref是为我们的值穿件了一个响应式应用。

ref与reactive的区别

ref()和reactive()这两种方式都是对响应式数据的声明。
reactive定义复杂的数据类型的数据，ref推荐定义基本数据类型。
ref定义的数据打印结果需要.value才能获取到结果，reactive不需要。
使用ref定义基本数据类型，ref也可以定义数组和对象。但是使用reactive去定义基本数据类型的时候控制台会报出警告的信息。

image.png

对于应用类型，什么时候使用ref，什么时候使用reactive？
- 只打算修改引用类型的属性的时候使用reactive，想要修改变量重新赋值的时候一定要用ref。
- 如果是重新赋值的话用reactive，在onMounted里面不是检测不到变化，不能在onMounted里面用reactive或者ref去赋值，但是可以直接counter.name=’lisi’去赋值

reactive与shallowReactive的区别

如果数据是服务器返回的LIST数据，而且只显示、不变更，那么最好是使用shallowRef来包装数据，可以节能。如果会有变更，那么应该用ref
shallow的中文意义是“浅层的”，shallowReactive不代理深层property，只会指向原始对象的深层property。
shallowReactive的用途是：如果一个对象的深层不可能变化，那么就没必要深层响应，这时候用shallowReactive可以节省系统开销。(印证第一点)