相同点:
????????响应性: 都是Vue响应式系统的一部分, 都会自动追踪依赖的响应式数据, 并在这些数据变化时重新执行.
计算属性 (Computed Properties ):
特性:
? ? ? ? 1. 缓存: 计算属性会缓存结果, 只有当依赖项发生变化时, 计算属性才会重新计算.
????????2. 同步: 计算属性通常是同步操作, 不适合执行异步或副作用.
????????3. 返回值: 计算属性会返回一个值, 这个值会被缓存, 知道依赖的响应式数据变.
使用场景:
????????1.数据聚合时
import { ref, computed } from 'vue';
export default {
setup() {
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
return { firstName, lastName, fullName };
}
};
????????2.基于现有数据生成新数据时.????????
export default {
setup() {
const organizationList = [........]
const res = computed(() => {
return organizationList.filter((item) => item.minLevel > 0 && item.level > 0 );
});
return { res };
}
};
????????3.复杂计算时
import { ref, computed } from 'vue';
export default {
setup() {
const items = ref([{ price: 10 }, { price: 20 }, { price: 30 }]);
const totalPrice = computed(() => {
return items.value.reduce((sum, item) => sum + item.price, 0);
});
return { items, totalPrice };
}
};? ? ? ? 4.多重条件判断时.
import { ref, computed } from 'vue';
export default {
setup() {
const innerDisabled = true;
const disabled = true;
const ok = true;
const isDisabled = computed(() => innerDisabled && disabled && ok );
return { isDisabled };
}
};
? ? ? ? 5.数组过滤与排序
// 在处理列表时，计算属性可以用来对列表进行过滤、排序或其他数组操作，而不会影响原始数据。
import { ref, computed } from 'vue';
export default {
setup() {
const users = ref([
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Carol', age: 22 }
]);
const sortedUsers = computed(() => {
return users.value.slice().sort((a, b) => a.age - b.age);
});
return { users, sortedUsers };
}
};
特性:
? ? ? ? 1. 无缓存: watch不会缓存数据, 它会在每次依赖的响应式数据变化时执行.
????????2. 有新旧值.
????????3. 更多控制: watch提供了更多的控制, 如立即执行, 深度观察.
????????4. 通常用来执行副作用: 如异步请求, 操作DOM等
使用场景:
????????1.watch 可以同时监听多个响应式数据源，并在它们变化时执行回调。
????????2.当响应式数据变化需要执行异步操作，如从服务器获取数据，watch 可以在数据变化后触发这些操作，并处理异步操作的结果。
????????3.可以在watch的回调函数中执行任何操作，而不仅仅是计算一个值。
????????4.在使用前端路由时，watch 可以用来监听路由变化，执行如权限验证、数据预加载、状态重置等操作。
特性:
????????1.自动收集依赖: watchEffect 会自动追踪执行过程中用到的响应式状态, 并在状态发生变化时重新执行.
????????2. 立即执行: watchEffect会立即执行一次.
????????3. 不返回值: watchEffect 没有返回值, 它用于执行副作用.
使用场景:
????????1.自动追踪响应式状态的变化.
// 只要watchEffect使用了某个属性, 当这个属性发生变化后,就会执行当前watchEffect函数
import { ref, watchEffect } from 'vue';
export default {
setup() {
const count = ref(0);
watchEffect(() => {
console.log(`count is now: ${count.value}`);
});
}
};
? ? ? ? 2.与计算属性结合使用.
// 当你有一个计算属性，并且想在它的值发生变化时执行某些动作时，你可以使用watchEffect来自动追踪这个计算属性的依赖。
import { ref, computed, watchEffect } from 'vue';
export default {
setup() {
const firstName = ref('Jane');
const lastName = ref('Smith');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
watchEffect(() => {
document.title = fullName.value;
});
return { firstName, lastName };
}
};? ? ? ? 3.数据获取和异步操作
// watchEffect可以用于在依赖的响应式状态变化时执行异步操作，如数据获取。
import { ref, watchEffect } from 'vue';
import axios from 'axios';
export default {
setup() {
const userId = ref(1);
const user = ref(null);
watchEffect(async () => {
const response = await axios.get(`/api/users/${userId.value}`);
user.value = response.data;
});
return { userId, user };
}
};? ? ? ? 4.监听路有变化
// 在Vue应用中，你可能需要在路由变化时执行副作用，watchEffect可以用来追踪路由状态的变化。
import { watchEffect } from 'vue';
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
watchEffect(() => {
// 假设我们想在路由参数变化时执行一些操作
console.log(`Current route id is: ${route.params.id}`);
});
}
};