在 setup()
函数中,为什么我们需要通过 return
来暴露数据
封装和模块化:通过 return 语句,我们可以明确哪些变量、计算属性或方法应该被模板或其他组件选项使用。这有助于保持组件的逻辑清晰和模块化。
响应式:Vue 的响应式系统是基于 ES6 的 Proxy 实现的。在 setup() 函数中,我们使用 ref()、reactive() 等函数来创建响应式数据。当这些数据发生变化时,Vue 会自动更新 DOM。通过 return 将这些数据暴露给模板,我们可以确保当数据变化时,模板也会得到更新。
可读性和可维护性:通过明确返回的数据和方法,其他开发人员可以更容易地理解组件的用途和工作原理。此外,这也使得代码更易于维护和扩展。
避免全局污染:如果不使用 return 来暴露数据,而是在 setup() 函数内部直接操作全局变量或对象,那么这可能会导致全局污染和难以追踪的 bug。通过 return,我们可以确保只暴露必要的数据和方法,从而避免全局污染。
代码示例:
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
// 通过 return 暴露 count 和 increment
return {
count,
increment,
};
},
};
</script>
Vue 3为什么通过 setup 函数来暴露数据
逻辑复用和组合:在 Vue 2 及其之前的版本中,组件的数据、计算属性、方法等通常被分散在 data、computed、methods 等选项中。这种方式在组件变得复杂时,会导致逻辑分散,难以复用和组合。而 setup 函数允许我们将这些逻辑集中在一个地方,通过返回值来暴露需要的数据和方法,从而更容易地实现逻辑复用和组合。
更好的类型检查和类型推断:setup 函数是 TypeScript 友好的,允许我们利用 TypeScript 的类型系统来更好地检查和管理组件的状态和逻辑。通过明确返回的数据和方法的类型,我们可以获得更好的类型检查和类型推断,从而减少运行时错误并提高代码的可维护性。
更清晰的逻辑结构:使用 setup 函数可以使组件的逻辑结构更加清晰。我们可以将相关的逻辑(如状态、计算属性、方法等)组织在一起,形成一个独立的函数块。这使得组件的代码更易于阅读和理解,降低了维护成本。
与 Vue 2 的兼容性:虽然 Vue 3 引入了许多新功能和改进,但它仍然需要与 Vue 2 保持一定的兼容性。通过 setup 函数,Vue 3 可以为 Vue 2 用户提供一种逐步迁移到新 API 的方式。同时,对于新的 Vue 3 项目,使用 setup 函数也可以确保我们充分利用 Vue 3 的新特性和优势。
响应式系统:在 setup 函数中,我们可以使用 Vue 3 提供的响应式 API(如 ref、reactive 等)来定义组件的状态。这些状态是响应式的,当它们发生变化时,Vue 会自动更新相关的视图。通过 setup 函数来暴露这些数据,我们可以确保它们在整个组件中都是可用的,并且可以与视图保持同步。
vue2和vue3有哪些区别
一. 根节点不同
vue2中必须要有根标签。
vue3中可以没有根标签,会默认将多个根标签包裹在一个fragement虚拟标签中,有利于减少内存。
二. 组合式API和选项式API
在vue2中采用选项式API,将数据和函数集中起来处理,将功能点切割了当逻辑复杂的时候不利于代码阅读。
在vue3中采用组合式API,将同一个功能的代码集中起来处理,使得代码更加有序,有利于代码的书写和维护。
三. 生命周期的变化
创建前:beforeCreate -> 使用setup()
创建后:created -> 使用setup()
挂载前:beforeMount -> onBeforeMount
挂载后:mounted -> onMounted
更新前:beforeUpdate -> onBeforeUpdate
更新后:updated -> onUpdated
销毁前:beforeDestroy -> onBeforeUnmount
销毁后:destroyed -> onUnmounted
异常捕获:errorCaptured -> onErrorCaptured
被激活:onActivated 被包含在<keep-alive>中的组件,会多出两个生命周期钩子函数。被激活时执行。
切换:onDeactivated 比如从 A 组件,切换到 B 组件,A 组件消失时执行
我们通常会用 onMounted 钩子在组件挂载后发送异步请求,获取数据并更新组件状态。
这是因为onMounted钩子在组件挂载到DOM后调用,而发送异步请求通常需要确保组件已经挂载,以便正确地操作DOM或者更新组件的状态。
四.v-if和v-for的优先级
在vue2中v-for的优先级高于v-if,可以放在一起使用,但是不建议这么做,会带来性能上的浪费
在vue3中v-if的优先级高于v-for,一起使用会报错。可以通过在外部添加一个标签,将v-for移到外层
五.diff算法不同
vue2中的diff算法
遍历每一个虚拟节点,进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方。 用patch记录的消息去更新dom
缺点:比较每一个节点,而对于一些不参与更新的元素,进行比较是有点消耗性能的。 特点:特别要提一下Vue的patch是即时的,并不是打包所有修改最后一起操作DOM,也就是在vue中边记录变更新。(React则是将更新放入队列后集中处理)。
vue3中的diff算法
在初始化的时候会给每一个虚拟节点添加一个patchFlags,是一种优化的标识。 只会比较patchFlags发生变化的节点,进行识图更新。而对于patchFlags没有变化的元素作静态标记,在渲染的时候直接复用。
六. 响应式原理不同
vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现,Object.definedProperty()会遍历每一个属性。
vue3通过proxy代理的方式实现。
proxy的优势:不需要像Object.definedProperty()的那样遍历每一个属性,有一定的性能提升proxy可以理解为在目标对象之前架设一层“拦截”,外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。
当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历,会自动监听所有属性,有利于性能的提升
总结
更快的渲染性能:
Vue3 相比 Vue2 来说,Vue3 重写了虚拟 Dom 实现,编译模板的优化,更高效的组件初始化。
更小的体积:
Vue 3 的运行时核心相比 Vue 2 更小,这意味着更小的打包体积,减少了前端加载时间。
Tree-shaking 支持:Vue 3 代码更容易被 Tree-shaking 优化,因此可以更好地剔除不需要的代码。
更好的 TypeScript 支持:
Vue 3 的代码库已经全面采用 TypeScript 重写,提供了更好的类型推断和类型提示。
提供了更多的内置类型声明,使得开发时更容易发现代码错误和调试。
更灵活的组合式 API:
Vue 3 引入了组合式 API,使得组件的逻辑可以更好地组织和复用。
组合式 API 提供了更直观、更灵活的方式来组织组件代码,使得代码更易读、易维护。
更好的响应式系统:
Vue 3 使用了 Proxy 来重写响应式系统,相比 Vue 2 的 Object.defineProperty,更加直观和强大。
在 Vue 3 中,可以在更深的层次上追踪响应式变量的变化,使得开发者能够更准确地监听数据变化。