快速上手Vue3

Vue默认版本都3.0，在不学就Out了。对于有Vue基础的同学来说，掌握几个关键点，上手Vue3分分钟的事。我们一起来看看吧！

需要掌握的几点：

1.Vue2 options Api 和 Vue3 Composition API的区别

2.setup函数

3.ref、reactive响应式引用

4.toRefs将对象包装，解构的值也是响应式

5.生命周期函数

一、Vue2 options Api VS Vue3 Composition API

image.png

从上图可知Vue2的处理逻辑是分散的，Vue3的处理逻辑在一起，维护也更方便

1.setup函数

• Vue3所有代码的编写都是在setup()里，它是实例被完全初始化之前自动调用，相当于created。setup接收2个参数props和context(attr,slots,emit)，会return出一些内容，这些内容可以直接在template里直接使用

2.ref、reactive响应式引用

• vue3里定义的变量不是响应式的，数据改变，页面不会改变，需要ref、reactive进行转换
• ref、reactive原理是通过Proxy，对数据进行封装，当数据变化时，触发模板内容的更新
• ref处理基本类型的数据，reactive 处理引用类型的数据

3.toRefs将对象包装，解构的值也是响应式

• reactive 处理引用类型的数据变为响应式，解构出来的数据不是响应式，需要toRefs进行转换

4.生命周期函数

• 和vue2相比少了create,多了onRenderTracked(每次渲染后收集响应式依赖)、onRenderTriggered(每次渲染重新触发的时候)

以上就是vue3的简单介绍，其他和vue2大致都相同，大家一起加油！