vue3和vue2区别

响应式区别

在 Vue 2 中,使用了 Object.defineProperty 来实现数据的响应式。它通过逐个定义对象属性的方式来进行数据的劫持和监听。这种方式存在一些限制,例如无法监听新增的属性,需要使用 Vue 提供的 $set 方法来实现响应式。此外,由于需要逐个定义属性,对于大型对象或数组的性能不够理想。

而在 Vue 3 中,使用了 Proxy 来实现响应式系统。Proxy 是 ES6 提供的一种代理机制,可以拦截对象的操作。Vue 3 使用 Proxy 来创建一个中间代理,该代理会拦截对数据的访问和修改,并触发相应的响应。相较于 Vue 2 的 Object.defineProperty,Proxy 提供了更强大的功能和性能优势。

使用 Proxy 实现的响应式系统具有以下优势:

  1. 可以监听新增和删除的属性:Proxy 可以监听对象的整个访问和修改过程,包括属性的新增和删除。这意味着无需特殊处理,即可实现对新增属性的监听。
  2. 性能更好:Proxy 的实现方式比 Object.defineProperty 更高效。它可以一次性拦截整个对象或数组,而不需要逐个定义属性,因此在处理大型对象或数组时具有更好的性能。
  3. 扩展性更好:Proxy 提供了丰富的拦截器方法,可以拦截对象的各种操作,例如读取属性、修改属性、删除属性等。这使得开发者可以根据需求自定义拦截器的行为,实现更高级的功能。

总结来说,Vue 3 使用 Proxy 来实现响应式系统,相较于 Vue 2 的 Object.defineProperty,具有更好的性能和扩展性,并且可以监听新增和删除的属性。这些改进使得 Vue 3 的响应式系统更加强大和灵活。

例子:

假设我们有一个 Vue.js 2 的响应式对象 data,它包含了两个属性 name 和 age

const data = {
  name: 'John',
  age: 25
}

在 Vue.js 2 中,如果我们将 data 对象传递给 Vue 实例进行响应式处理,Vue.js 会使用 Object.defineProperty 来劫持这两个属性的变化。

new Vue({
  data: data
})

现在,如果我们在运行时向 data 对象中添加一个新的属性 gender,Vue.js 2 将无法自动追踪和响应这个新增属性的变化。

data.gender = 'Male'

这是因为在初始化阶段,Vue.js 2 已经使用 Object.defineProperty 对 data 对象的 name 和 age 属性进行了劫持和监听,但它无法感知到后续的属性变化。

所以,当我们在运行时向 data 对象添加新的属性 gender 时,Vue.js 2 是无法自动将其变为响应式的,也无法触发相应的更新操作。

这就是为什么 Vue.js 2 无法监听新增属性的原因。它的响应式系统是在初始化阶段对属性进行劫持和监听的,而无法动态地追踪和响应后续的属性变化。这也是 Vue.js 3 引入 Proxy 对象的一个重要改进,它可以监听新增和删除的属性,提供了更强大和灵活的响应式能力。

组件实例

Vue 3 引入了组合式 API(setup),与 Vue 2 的选项式 API(各种生命周期data啥的) 相比,有以下几个主要区别:

1. 组合式 API 的灵活性:组合式 API 允许开发者根据逻辑相关性来组织代码,而不是按照选项的方式将代码分散在不同的选项中。这样可以更好地组织和重用代码,使得代码更加可读和可维护。

2. 组合式 API 的逻辑复用:组合式 API 提供了一种更好的逻辑复用方式,通过自定义组合函数,可以将逻辑相关的代码封装为一个可复用的组合函数,并在多个组件中进行复用。这使得代码的复用性更高,减少了重复编写相似逻辑的工作。

3. 组合式 API 的类型推导:Vue 3 的组合式 API 借助 TypeScript 的类型推导能力,提供了更好的类型支持。开发者可以在组合函数中明确指定参数和返回值的类型,提供更好的代码提示和类型检查。

4. 组合式 API 的逻辑封装:组合式 API 允许将逻辑封装在组合函数中,使得组件的代码更加简洁和聚焦。开发者可以将复杂的逻辑拆分成多个组合函数,每个组合函数负责不同的功能,从而提高代码的可读性和可维护性。

总的来说,组合式 API 提供了更灵活、可复用和可维护的方式来组织和编写代码。它使得开发者能够更好地组织逻辑、复用代码,并且提供了更好的类型支持。这些改进使得 Vue 3 的组合式 API 更适合开发大型复杂应用,并且提供了更好的开发体验。

生命周期


vue2:

beforeCreate:在实例初始化之后、数据观测 (data observer) 和事件配置之前被调用。

created:在实例创建完成后被调用,这时候实例已经完成了数据观测、属性和方法的运算,但是尚未挂载到 DOM 上。

beforeMount:在挂载开始之前被调用,相关的 render 函数首次被调用。

mounted:在挂载完成后被调用,此时组件已经被放入 DOM 中。

beforeUpdate:在组件更新之前被调用,发生在重新渲染之前。

updated:在组件更新之后被调用,发生在重新渲染之后。

beforeDestroy:在实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed:在实例销毁之后调用。此时,所有的指令都已解绑,所有的事件监听器都已移除。

vue3:

因为引入了组合式API,将组件逻辑转移到了setup函数中,setup函数就替代了beforeCreate和created勾子函数

onBeforeMount:在挂载之前执行的钩子函数。

onMounted:在组件挂载到 DOM 后执行的钩子函数。

onBeforeUpdate:在组件更新之前执行的钩子函数。

onUpdated:在组件更新后执行的钩子函数。

onBeforeUnmount:在组件卸载之前执行的钩子函数。

onUnmounted:在组件卸载后执行的钩子函数。
 

总结

  1. 响应式系统的性能优化:Vue 3 使用 Proxy 替代了 Vue 2 中的 Object.defineProperty,这使得响应式系统在性能上有所提升。Proxy 的实现方式更高效,可以一次性拦截整个对象或数组,而不需要逐个定义属性,从而提高了大型对象或数组的性能。

  2. 虚拟 DOM 的优化:Vue 3 在虚拟 DOM 的实现上进行了一些优化。它引入了静态树提升 (Static Tree Hoisting) 技术,可以在编译阶段检测到静态节点并将其提升为常量,减少了运行时的虚拟 DOM 操作,提高了渲染性能。

  3. 编译器的优化:Vue 3 的编译器进行了一些优化,生成的代码更加紧凑和高效。编译器在编译时会对模板进行静态分析,并生成更优化的渲染函数,减少了运行时的开销。

  4. Tree-shaking 支持:Vue 3 的模块系统使用了 ES Module 的语法,使得现代的打包工具可以更好地进行 Tree-shaking,只打包使用到的组件和功能,减少了打包体积。

你可能感兴趣的:(vue.js,javascript,前端)