Vue3基础知识

一、vue3安装

1.全局安装脚手架：npm i @vue/cli -g

2.创建项目：vue create 项目名称

3. 

二、vue3特点

1. 新增组合式api

2. 更加接近原生js

3. 按需加载

三、vscode插件推荐

1.vetur

2.Vue Volar extension Pack

四、vue3与vue2的相同与不同

1.启动方式

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")

2.全局方法挂载

v2:

Vue.prototype.$say = function(msg){alert(msg)}

v3:

app.config.globalProperties.$say = function(msg){alert(msg)}

3.根节点

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

4.生命周期

v2:

        1.beforeDestroy() 销毁前

        2.destroyed()  销毁后

v3:

        1.beforeUnmount()  组件将要卸载

        2.unmounted()  组件已经卸载

五、 setup api

1.ref

        创建值类型响应式数据方法

        在seup内部需要 .value 来访问设置值

2.reactive

        创建引用类型响应式数据方法

3.defineProps

        定义 组传的传参props

4.defineEmits

        定义组件发送的事件

5.defineExpost

        定义哪些方法可以被引用

6.watch

        监听一个数据的变化

7.watchEffect

        监听多个数据

8.生命周期

        setup中的生命周期，没有beforeCreate与created

        setup的生命周期需要加on前缀

        挂载完毕：onMounted

        挂载前：onBeforeMount

        更新完毕：onUpdated

        更新前：onbeforeUpdate

        卸载完毕：onUnmounted

        卸载前：onBeforeUnmount