目录
组合式API的好处
Vue3有哪些生命周期?
Vue2.X 和 Vue3.X对比
watch 和 watchEffect 的区别?
1.watch
2.watchEffect
watch和watchEffect的对比
ref 与 reactive 的区别?
定义
主要特点
基本用法
与
组件定义
生命周期钩子
组合式API的好处
1.更好的逻辑组织:
在选项式API中,组件逻辑是按照data、methods、computed、watch等分块写的,这种分离可能会导致相同功能的代码分散在不同的部分。
组合式API 通过将相关的逻辑组合在一起,使代码更加紧凑和清晰,尤其实在复杂组件中,组织代码的方式更加自然。
2.更好的逻辑复用:
在选项式API中,如果要复用逻辑,通常使用mixin,但mixin存在作用域不清晰、命名冲突等问题。
组合式API提供了composable (可组合函数)的概念,运行将逻辑抽取成独立的函数,这样复用性更强、代码更清晰。
3.更好的类型推断支持:
组合式API更好地支持TypeScript,尤其是在函数内部可以更明确地推断出数据和函数的类型,而不需要额外的类型定义。
4.更灵活的响应式系统:
组合式API 提供了更灵活的响应式系统,比如通过ref和reactive可以更直观地控制响应式数据的行为。
Vue3有哪些生命周期?
- setup():开始创建组件,在beforeCreate 和 created 之前进行, 创建的是 data 和 method
- onBeforeMount():组件挂载到节点上之前执行的函数
- onMounted():组件挂在完成后执行的函数;
- onBeforeUpdate():组件更新之前执行的函数;
- onUpdated():组件更新完成之后执行的函数;
- onBeforeUnmount():组件卸载之前执行的函数;
- onUnmounted():组件卸载完成后执行的函数;
- onActived():被包含在<keep-alive>中的组件, 会多出两个生命周期钩子函数,被激活时执行;
- onDeactivated():比如 A 组件切换到 B 组件,A组件消失时执行;
- onErrorCaptured():当捕获一个来自子孙组件的异常时激活钩子函数。
Vue2.X 和 Vue3.X对比
vue2 -------> vue3
beforeCreate --------> setup(()=>{})
created --------> setup(()=>{})
beforeMount --------> onBeforeMount(()=>{})
mounted --------> onMounted(()=>{})
beforeUpdate --------> onBeforeUpdate(()=>{})
updated --------> onUpdated(()=>{})
beforeDestroy --------> onBeforeUnmount(()=>{})
destroyed --------> onUnmounted(()=>{})
activated --------> onActivated(()=>{})
deactivated --------> onDeactivated(()=>{})
errorCaptured --------> onErrorCaptured(()=>{})
watch 和 watchEffect 的区别?
1.watch
watch用于监听特定响应式数据的变化,并在数据变化时执行回调函数。下面是一个使用watch的例子:
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
// 执行一些副作用操作,例如发送API请求、更新其他状态等
});
// 改变count值会触发watch的回调
count.value++;
- watch接受两个参数, 第一个参数是要监听的响应式值或计算属性(可以是ref、reactive对象的属性或者是computed的结果),第二个参数是回调函数。
- 回调函数会在监听的值发生变化时被调用,它会接收到新的值和旧的值作为参数。
- 如果你要深度监听对象或数组的变化, 可以为watch添加第三个参数,配置对象,如{deep:true}
2.watchEffect
watchEffect则是立即执行并且持续监听其内部依赖变化的函数。每当其依赖的响应式值发生变化时,它都会重新执行。
import { ref, watchEffect } from 'vue';
const count = ref(0);
const message = ref('Initial Message');
watchEffect(() => {
console.log(`Count is ${count.value}, and message is ${message.value}`);
// 根据count和message的值执行一些副作用操作
});
// 改变count或message值都会触发watchEffect的再次执行
count.value++;
message.value = 'Updated Message';
详细讲解:
- watchEffect不需要指定监听的具体值,它会自动追踪其内部表达式所涉及的所有响应式依赖。
- 当调用watchEffect时,它会立即执行一次,并记录下内部依赖的快照,此后每当依赖项变化时,它会再次执行。
- 若想停止监听,可以返回一个清理函数,例如在组件卸载时清理副作用。
watch和watchEffect的对比
watch
- watch显式指定依赖数据,依赖数据更新时执行回调函数
- 具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性,页面首次加载就会执行)
- 监视ref定义的响应式数据时可以获取到原值
- 既要指明监视的属性,也要指明监视的回调
watchEffect
- watchEffect自动收集依赖数据,依赖数据更新时重新执行自身
- 立即执行,没有惰性,页面的首次加载就会执行
- 无法获取到原值,只能得到变化后的值
- 不用指明监视哪个属性,监视的回调中用到哪个属性就监视哪个属性
ref 与 reactive 的区别?
定义
reactive 和 ref 是 Vue 3 中的两种响应式数据绑定方式,ref 适用于简单的响应式数据,而 reactive 则适用于复杂对象或数组的响应式数据。
ref:用于声明 基本类型 或者单个变量的响应式数据。
ref 的核心在于它包装了一个值,当这个值变化时,依赖它的视图会重新渲染。
注意:ref 返回的是一个对象,其中的值通过 .value 属性访问。
const count = ref(0);
console.log(count.value); // 0
count.value++;
reactive:用于声明 对象 或 数组 的响应式数据。
reactive 更适合处理复杂的数据结构(对象或数组)。它返回的是一个响应式对象,直接操作对象的属性时,视图会自动更新。
const state = reactive({
name: 'Vue',
age: 3
});
console.log(state.name); // 'Vue'
state.age = 4; // 视图会自动更新
主要区别如下:
1. 数据类型不同:
ref用于包装JavaScript基本类型的数据(如字符串、数字、布尔值等),
而reactive可以用于包装JavaScript对象和数组等复杂类型的数据。
2. 使用方式不同:
ref需要通过在模板中使用ref指令以及在JavaScript代码中使用ref函数进行创建和使用,而reactive则需要通过调用Vue.js提供的reactive函数进行包装和创建。
3. 访问方式不同:
对于通过ref函数创建的响应式数据,我们可以通过.value属性来访问其实际值;而对于通过reactive函数创建的响应式对象,我们可以直接访问其属性或调用其方法。
4. 设计理念不同:
ref主要是为了解决单一元素/数据的响应式问题,而reactive则是为了解决JavaScript对象和数组等复杂数据结构的响应式问题
<script setup>
<script setup>
是 Vue 3 引入的一种新语法糖,它用于使用组合式 API 编写组件。这种语法简化了 Composition API 的使用,使得编写和组织组件逻辑更加简洁和直观。
主要特点
-
声明式:
<script setup>
提供了一种声明式的方式来使用组合式 API,减少了样板代码。 -
自动响应:在
<script setup>
中定义的响应式引用(如ref
和reactive
)和函数自动暴露给模板,无需返回对象。 -
生命周期钩子:生命周期钩子(如
onMounted
、onUpdated
等)可以直接导入和使用,无需定义匿名函数。 -
模块作用域:在
<script setup>
中导入的变量和函数自动拥有模块作用域,减少了全局命名冲突。
基本用法
<script setup>
import { ref, computed, onMounted } from 'vue';
const count = ref(0);
const doubledCount = computed(() => count.value * 2);
onMounted(() => {
console.log('Component is mounted');
});
function increment() {
count.value++;
}
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<p>Doubled Count: {{ doubledCount }}</p>
<button @click="increment">Increment</button>
</div>
</template>
与 <script>
的区别
-
无需返回对象:在
<script setup>
中,你不需要返回一个对象来暴露响应式状态、计算属性和方法给模板。 -
更少的代码:
<script setup>
使得组件的编写更加简洁,减少了样板代码。
组件定义
在 <script setup>
中,你可以定义组件的响应式状态、计算属性、方法和生命周期钩子,就像在 <script>
标签中使用组合式 API 一样,但是更加简洁。
生命周期钩子
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
console.log('Component is mounted');
});
</script>