从零认识 Vue2 和 Vue3 实例创建的区别

Vue2 和 Vue3 实例创建的区别

初始化方式

• Vue2： 通过 new Vue() 构造函数的方式来创建实例。
• Vue3： 通过 createApp() 工厂函数来创建实例。

全局/局部注册

• Vue2： 组件可以通过 Vue.component() 方法全局注册，也可以通过 this.$options.components 局部注册。
• Vue3： 组件只能通过 app.component() 方法局部注册，取消了全局注册的方式。

指令

• Vue2： 指令通过 v-指令名 的方式使用，指令的处理函数是通过 Vue.directive() 方法全局注册的。
• Vue3： 指令通过 v-指令名 的方式使用，指令的处理函数是通过 app.directive() 方法局部注册的。

生命周期

• Vue2： 组件的生命周期钩子有 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy 和 destroyed。
• Vue3： 组件的生命周期钩子有 setup, beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy 和 destroyed。

计算属性

• Vue2： 计算属性通过 computed 选项来定义，依赖于其他属性的值。
• Vue3： 计算属性通过 computed 选项来定义，依赖于其他属性的值。

侦听器

• Vue2： 侦听器通过 watch 选项来定义，监听属性值的改变。
• Vue3： 侦听器通过 watch 选项来定义，监听属性值的改变。

插槽

• Vue2： 插槽通过 <slot> 标签来定义，可以将父组件的内容插入到子组件中。
• Vue3： 插槽通过 <slot> 标签来定义，可以将父组件的内容插入到子组件中。

JSX

• Vue2： 不支持 JSX 语法。
• Vue3： 支持 JSX 语法，可以通过 @babel/preset-vue3 插件来使用。

模板语法

• Vue2： 使用 HTML 模板语法，可以将 HTML 代码和 JavaScript 代码混合在一起。
• Vue3： 使用 HTML 模板语法，可以将 HTML 代码和 JavaScript 代码混合在一起。