一、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