vue3

vue3

Vue3带来的新变化

性能提升

• 首次渲染更快
• diff算法更快
• 内存占用更少
• 打包体积变小

模板标签内不再要求只有一个根元素

setup入口函数

执行时机,在beforecreated之前

setup 中不能使用 this， this 指向 undefined

作为组合式api的起点或入口

ref 函数

1.ref函数返回的响应式数据是一个对象,想要在setup函数中修改,必须.value,模板中不需要

2.ref函数弥补了reactive函数对于类型的支持不足,推荐:如果明确知道要转化的对象的key名称,就用reactive函数,否则用ref函数

使用toRefs函数简化响应式对象的使用

使用场景:如果想要在模板中省略对象名称,直接使用属性名访问数据,可以使用toRefs函数对响应式对象进行包裹,然后展示

坑:经过reactive函数转化的响应式对象 如果直接解构会破坏响应式特性

computed

1.计算属性特性

1.依赖的响应式数据一旦发生变化会立刻重新求值

2.缓存特性

2.setup函数里使用

1.引入computed函数

2.setup函数中执行这个函数传入一个类型为函数的参数 在这个函数参数里定义计算公式

3.把计算属性方法执行结构返回

watch 侦听器

作用:监听数据变化执行回调逻辑 特别适合做一些大开销的操作 比如发送aj