浅谈Vue3和Vue2部分区别

1. Vue3 增加一个createApp方法；下面是举例说明；

Vue2:
import Vue from 'vue'
import App from './App.vue'

new Vue({

  render: h => h(App)

}).$mount('#app')

以上是我们在用vue2得时候常用的，通过创建根new Vue()实例，全局配置，容易影响别的根实例

Vue3：
import Vue from 'vue'；

import App from './App.vue'；

const app = createApp(App)；

app.config.globalProperties.foo = ‘bar’;

app.mount(App, '#app')

这样应用实例挂载得整个组件树共享一个上下文，该实例就不会被别的实例得任何全局配置影响。共享实例属性应附加到应用程序实例的config.globalProperties，下面会详细讲解globalProperties；

2.全局定义Vue3采用globalProperties；

Vue2:

Vue.prototype.$abc = 111;

let abc = this.$abc  // 111

Vue3:

let app = createApp(App);

app.config.globalProperties.foo = ‘bar’;

3.Vue3得setup

export default{
    name:’APP’,
    setup(props，context){
    Let name  = ‘110’;
    let num = ‘120’;
    function Helloword(){
        Console.log(‘hello word’)
    }
    Return {
    Name,
    Num,
    Helloword
    }
    Return()=>{h(‘h1’,’临沂’)}
}

注：最多可以接受2个参数：props,context

4.生命周期对应区别；

beforeCreate -> 请使用 setup()

created -> 请使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured