vue3.0基础

vue2.0和vue3.0的区别

1.启动方式不同

1.vue2启动代码如下

//vue2
new Vue({
store,
router,
render:h=>h(app)
}).$mount(#app)

2.vue3启动代码如下

//vue3
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
var app =  createApp(App)
app.use(store).use(router).mount('#app')

2.全局方法定义不同

1.vue2代码如下

//vue2
Vue.protoype.$http = axios

2.vue3代码如下

//vue3
var app =  createApp(App)
app.config.globalProperties.$http = axios

3.template根组件的不同

1.vue2有且只有一个根组件
2.vue3可以随意多个

4.生命周期钩子函数不同

1.vue2生命周期钩子函数代码如下

//创建前后
beforecreate(),created()
//挂载前后
beforemount(),mounted()
//更新前后
beforeupdate(),updated()
//销毁前后
beforedestory(),destroyed()

2.vue3生命周期钩子函数代码如下

setup() : //开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount() : //组件挂载到节点上之前执行的函数；
onMounted() : //组件挂载完成后执行的函数；
onBeforeUpdate(): //组件更新之前执行的函数；
onUpdated(): //组件更新完成之后执行的函数；
onBeforeUnmount(): //组件卸载之前执行的函数；
onUnmounted(): //组件卸载完成后执行的函数；
onActivated(): //被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated(): //比如从 A 组件，切换到 B 组件，A 组件消失时执行；
onErrorCaptured(): //当捕获一个来自子孙组件的异常时激活钩子函数。