Vue3.0与Vue2.0 main.js的区别

Vue3.0与Vue2.0 main.js的区别

对于刚入门的我来说，由于掌握的知识并不多，视频上大部分都是用的Vue2.0，这就导致使用Vue3.0的时候，跟视频上的Vue3.0的main.js不一样，然后就迷惑了。

首先来看看两者之间的差别。

Vue2.0 main.js的文件

import Vue from 'vue'
import App from './App'
import router from './router/router';

new Vue({
 router,
 render: h => h(App),
}).$mount('#app')

Vue3.0 mian.js的文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

看着这个就会忽然间迷惑，然后，看着视频上注册全局属性什么的，然后就呆住了，不知道怎么去做了
首先这个问题，我在Vue3.0的官方文档上发现了这个问题。
在 Vue 3 中，全局改变 Vue 行为的 API 现在被移动到了由新的 createApp 方法所创建的应用实例上。此外，现在它们的影响仅限于该特定应用实例：

import { createApp } from 'vue'

const app = createApp({})

调用 createApp 返回一个应用实例。该实例提供了一个应用上下文。应用实例挂载的整个组件树共享相同的上下文，该上下文提供了之前在 Vue 2.x 中的“全局”配置。

另外，由于 createApp 方法返回应用实例本身，因此可以在其后链式调用其它方法，这些方法可以在以下部分中找到。

是不是没懂，没懂没关系，直接上实例，看看两个分别怎么实现全局注册。

Vue2.0 实现全局注册

import Vue from 'vue';
import App from './App.vue';

//全局注册color指令
Vue.directive('color', function (el, binding, vnode) {
  console.log('el', el); // 被绑定的node节点
  console.log('binding', binding); // 一个对象，包含指令的很多信息
  console.log('vnode', vnode); // Vue编译生成的虚拟节点
  el.style = 'color:' + binding.value;
});

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Vue3.0实现全局注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App);

//全局注册color指令
app.directive('color', function (el, binding, vnode) {
    console.log('el', el); // 被绑定的node节点
    console.log('binding', binding); // 一个对象，包含指令的很多信息
    console.log('vnode', vnode); // Vue编译生成的虚拟节点
    el.style = 'color:' + binding.value;
  });

app.use(router).mount('#app')

仔细观摩两者之间的差别应该就可以看出来Vue3.0的creatApp(App)跟Vue2.0的Vue是差不多的

最后再解释一下

在Vue3 中，通过使用 createApp 函数来创建应用，使用vue库的createApp方法传入基组件生成vm，然后再调用vm的mount方法传入选择器将实例挂载在dom节点上。

// 先导入createApp模块
import { createApp } from 'vue';
import App from './App.vue';

// createApp 创建一个APP实例，将入口文件放进去，参数是根组件（HelloVueApp），
// 在使用 mount() 挂载应用时，该组件是渲染的起点。
createApp(App).mount('#app');