上一篇，我使用了vue2创建了一个应用，这次我使用vue3创建一个应用，看一下两者有什么不同。

如下，是我用cue3创建的应用目录

发现和vue2应用的目录一模一样，然后我用对比工具对比了两者的文件。

1. 文件区别

下面是package.json文件的区别，首先vue版本不同，对应的扩展组件也不同。

下面是main.js的不同

然后是APP.vue的不同

2. 全局实例改变

这也是我们看到main.js中不同的地方。

3. 生命周期不同

在 Vue 2 中，自定义指令通过使用下列钩子来创建，以对齐元素的生命周期，它们都是可选的： 

bind - 指令绑定到元素后调用。只调用一次。 
inserted - 元素插入父 DOM 后调用。 
update - 当元素更新，但子元素尚未更新时，将调用此钩子。 
componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。 
unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。

然而，在 Vue 3 中，我们为自定义指令创建了一个更具凝聚力的 API。正如你所看到的，它们与我们的组件生命周期方法有很大的不同，即使钩子的目标事件十分相似。我们现在把它们统一起来了： 

created - 新增！在元素的 attribute 或事件监听器被应用之前调用。 
bind → beforeMount 
inserted → mounted 
beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。 
update → 移除！该钩子与 updated 有太多相似之处，因此它是多余的。请改用 updated。
componentUpdated → updated beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。 
unbind -> unmounted

const MyDirective = {
  created(el, binding, vnode, prevVnode) {}, // 新增
  beforeMount() {},
  mounted() {},
  beforeUpdate() {}, // 新增
  updated() {},
  beforeUnmount() {}, // 新增
  unmounted() {}
}

其他更多不同，可参见官网https://v3-migration.vuejs.org/zh/