小白快速上手Vue3

Vue3

1. 首先需要全局脚手架：npm i @vue/cli -g

创建项目： vue create 项目名称

Vue3的特点

1. 新增组合式
2. 更加接近她原生js
3. 更加解耦（react启发）
4. 按需加载

Vue3与Vue2：基本相同

不同点为

启动方式有所不同：
v2的启动方式：
import Vue from 'vue'
new vue({
store,router,
render:h=>h(App)
}).$mount("#app")
v3的启动方式：
import {createApp} from 'vue'
createApp(App).use(router).use(store).mount("#app")

全局方法加载
v3全局：app.config.globalProperties.$say = function(msg){alert(msg)}
v2全局：
Vue.prototype.$say = function(msg){alert(msg)}

根节点：v3可以有多个根节点，v2只能有一个根节点

Vue2对应Vue3的生命周期（左边为v2，右边为v3）
1、beforeCreate -> 使用 setup()

2、created -> 使用 setup()

3、beforeMount -> onBeforeMount

4、mounted -> onMounted

5、beforeUpdate -> onBeforeUpdate

6、updated -> onUpdated

7、beforeDestroy -> onBeforeUnmount

8、destroyed -> onUnmounted

9、errorCaptured -> onErrorCaptured
Vue2和Vue3钩子变化不大，删除了beforeCreate 、created  两个钩子使用setup()钩子来替代。

setup api

1. ref：创建值类型响应式数据方法，在setup内部需要.value来访问设置值
2. reactive:创建引用类型响应式数据方法
3. defineProps:定义组件的传参props
4. defineEmits:定义组件发送的事件
5. watch:监听一个数据的变化
6. 生命周期: setup中的生命周期，没有的foreCreate与created, setup的生命周期需要加on前缀