Vue2与Vue3的区别

目录

🙇🏻‍♀️

创建vue应用

响应式数据

列表渲染条件渲染指令优先级

生命周期

组合式api

typescript支持

---

🙇🏻‍♀️

创建vue应用

• vue3创建vue应用使用createApp函数 , 与模板绑定使用mount();
• vue2创建vue2应用使用new Vue()构造函数;

🙇🏻‍♀️

响应式数据

• 响应式数据在vue2中使用es5 object.defineproperty()进行数据劫持;
• 响应式数据在vue3中经过proxy对象代理

proxy{

<target>:Array:[]

<value>

}

🙇🏻‍♀️

列表渲染条件渲染指令优先级

• v2:v-for 优先级比 v-if 优先级高
• v3:v-if 优先级比 v-for优先级高

因此v-for 与 v-if 不一起使用 因为v-if会不断地渲染和销毁dom

🙇🏻‍♀️

生命周期

vue2	vue3
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated

Vue3:  setup();准备就绪—-执行顺序高于任何生命周期

• 若组件被<keep-alive>标签包裹，则多出下面两个钩子函数。 

1. onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。
2. onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。

🙇🏻‍♀️

组合式api

在Vue2中，一个组件通通包含data、computed、methods、watch等组件选项来组织逻辑，当组件变得越来越大时，逻辑关注点的列表也会增长，尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。

这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。

如果能够将同一个逻辑关注点相关代码收集在一起会更好。而这正是组合式 API 使我们能够做到的，我们不需要在不同的选项做不同得操作

因此，Vue3引入了 setup 组件选项，用于实现组合式API。

通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。

• 组合api
• 提供复用性
• 降低耦合性
• 增加可读性

setup在生命周期的位置:

setup位于beforeCreate和created之前，用于替代两者,在组件创建之前执行，一旦props被解析，就将作为组合式API的入口

此外，可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

注意： 

1. setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）
2. setup 中不能使用 this， this 指向 undefined
3. setup函数只会在组件初始化的时候执行一次
4. setup函数在beforeCreate生命周期钩子执行之前执行

详见官方文档组合式 API：setup() | Vue.js (vuejs.org)

🙇🏻‍♀️ 

typescript支持

• vue2中：默认是不支持typescript的。
• vue3中：支持使用typescript，使用typescript在构建大型项目时，能够很好的提高项目开发的质量。