文章目录
- 1.Vue 3相对于Vue 2有哪些主要改进
- 2.Vue 3中如何处理组件的Props
- 3.Vue 3中的Composition API是什么, 它与Options API有何不同
- 4.Vue 3中的响应式数据是如何工作的
- 5.Vue 3中的ref和reactive有何区别
- 6.Vue 3中的watchEffect和watch有何区别
1.Vue 3相对于Vue 2有哪些主要改进
- 更快的渲染性能: Vue 3使用了新的响应式系统, 提高了性能。
- 更小的体积: Vue 3通过优化打包方式和Tree-shaking等技术减小了体积。
- Composition API: Composition可以使逻辑易于维护和重用。
- TypeScript支持: Vue3对TS的支持更友好。
2.Vue 3中如何处理组件的Props
使用defineProps函数来定义组件的Props, 然后在setup函数中使用。
1.定义组件的Props
import { defineComponent, defineProps } from 'vue';const MyComponent = defineComponent({props: {propA: String, // 指定propA的类型为StringpropB: {type: Number, // 指定propB的类型为Numberdefault: 0, // 指定propB的默认值为0},// 其他Props...},setup(props) {// 在setup函数中可以使用propsconsole.log(props.propA); // 访问propA的值console.log(props.propB); // 访问propB的值// ...},
});export default MyComponent;
3.Vue 3中的Composition API是什么, 它与Options API有何不同
Vue 3中的Composition API是一种新的组织组件逻辑的方式, 与Vue 2中的Options API有很大的不同。Composition API是Vue 3引入的一项重要特性。旨在提高组件的可读性、可维护性和重用性。
Composition API与Options API的主要不同在于组织组件逻辑的方式:
- Options API是Vue 2中常用的组织组件逻辑的方式, 它将组件选项(data, methods, computed, watch)集中一个对象中, 当组件较为简单时, Options API良好, 不过随着组件复杂性的增加, 这种方式导致选项过多, 代码难以维护。
- Composition API将组件逻辑按照功能相关性进行组织, 可以使得代码更加易于维护和重用, 可以使用setup函数来编写组件逻辑, 使得相关的代码逻辑放一起。
- 通过Composition API, 可以不再受限于Options API的选项集中方式。这样可以使得代码更具结构化, 也更便于跨组件重用逻辑。Composition API更好的支持TS。
4.Vue 3中的响应式数据是如何工作的
响应式数据是通过使用reactive函数来实现的。reactive函数是Vue 3中的一个核心函数, 它可以将普通的JavaScript对象转换为响应式对象。
reactive函数接收一个普通的JavaScript对象作为参数, 返回一个响应式的Proxy对象, Proxy对象会拦截对对象属性的访问和修改操作, 从而在访问或修改属性时触发依赖追踪, 实现响应式。
5.Vue 3中的ref和reactive有何区别
ref和reactive都是用于创建响应式数据的函数
- ref函数用于创建一个简单的响应式引用对象, 它接收一个初始值作为参数, 返回一个包含value属性的对象。模板中需要.value访问值。
<template><div><p>Count: {{ count.value }}</p></div>
</template>
- reactive函数用于创建一个包含复杂数据结构的响应式对象。它接收一个普通的JavaScript对象作为参数, 返回一个包含Proxy代理的响应式对象, reactive能够追踪整个对象及其嵌套属性的变化。
<template><div><p>Name: {{ person.name }}</p><p>Age: {{ person.age }}</p></div>
</template>
- 使用ref, 适用于简单数据, 比如基本数据类型(数字, 字符串)或单一的引用类型数据。
- 使用reactive: 适用于复杂数据, 比如嵌套的对象或数组, 或需要响应式地追踪整个数据结构变化的情况。
6.Vue 3中的watchEffect和watch有何区别
watchEffect和watch都用于监视响应式数据的变化, 用法和使用上有一点区别。
-
watchEffect是一个自执行的函数, 会立刻执行一次, 并在函数体内自动追踪响应式数据的变化。
-
watchEffect不需要显式地指定要监视的数据, 会自动捕获函数体内使用的响应式数据, 在这些数据发生变化的时候执行函数。
-
watchEffect适用于处理副作用, 比如函数内执行异步操作, 更新dom操作。
-
watch是一个有特定侦听目标的函数, 需要明确监听的数据。
-
watch的回调函数接收两个参数, 旧和新值, watch适用于监视特定的响应式数据, 在数据变化时执行特定的操作。
-
watchEffect适用于处理副作用, watch适用于特定的数据监视和操作。
