本文介绍了Vue.js 3.0中的计算属性（computed）、watch侦听器以及新增的watchEffect函数。计算属性用于简化模板代码并缓存结果，watch用于监听响应式数据变化并执行回调。文章详细讲解了它们的创建方法，并通过在线案例演示了其工作原理。同时，还探讨了Vue 3.0中watchEffect的使用及其与watch的区别。最后，通过TodoLists案例展示了如何在实际开发中应用这些概念。
本文目录
computed 计算属性
作用
计算属性的作用是简化模版中的代码，可以缓存计算的结果，当数据变化后它会重新计算。
创建方法
在Vue.js 3.0中，我们依然可以像vue2.x的那样，在创建组件的时候传入computed选项，来创建计算属性。 在Vue.js 3.0中也可以在setup中通过computed函数来创建计算属性。
computed函数创建计算属性方式
- 第一种用法：
computed函数中传入一个获取值的函数，函数内部依赖响应式的数据；当依赖的数据发生变化后， 会重新执行该函数获取数据。computed函数返回一个不可变的响应式对象。类似于使用ref创建的对象。具有一个value属性，获取计算属性的值要通过value属性来获取。模版中使用计算属性可以省略.value。computed(() => count.value + 1) - 第二种用法：
computed函数中传入一个对象，这个对象具有getter和setter，返回一个不可变的响应式对象。例如：const count = ref(1) const plusOne = computed({ set: () => count.value + 1, get: val => { count.value = val - 1 } })
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app">
<button @click="push">按钮 🔘</button>
未完成: {
{
activeCount }}
</div>
<script type="module">
import {
createApp,
computed,
reactive,
} from './node_modules/vue/dist/vue.esm-browser.js';
const data = [
{
text: '看书', completed: false },
{
text: '写代码', completed: false },
{
text: '约会', completed: true },
];
createApp({
setup() {
const todos = reactive(data);
const activeCount = computed(
() => todos.filter((item) => !item.completed).length
);
return {
activeCount,
push: () => {
todos.push({
text: '开会',
completed: false,
});
},
};
},
}).mount('#app');
</script>
</body>
</html>
结果如下：
watch侦听器
作用
计算属性的作用是监听响应式数据的变化，然后执行一个相应的回调函数。可以获取到监听数据的新值和旧值。
创建方法
与computed类似，在Vue.js 3.0中，我们依然可以像vue2.x的那样，在创建组件的时候传入watch选项，来创建一个侦听器。 在Vue.js 3.0中也可以在setup中通过watch函数来创建一个侦听器。它的使用方式和之前使用的this.$watch()，或者选项中的watch作用是一样的：监听响应式数据的变化，然后执行一个相应的回调函数。可以获取到监听数据的新值和旧值。
watch函数
- watch函数的三个参数
- 第一个参数：要监听的数据，可以是一个获取值的函数，监听这个函数返回值的变化；或者直接是一个ref或者reactive返回的响应式对象。还可以是数组。
- 第二个参数：监听到数据变化之后执行的回调函数，这个函数有两个参数，分别是新值和旧值。
- 第三个参数：选项对象，可以传入两个选项：深度监听
deep和立即执行immediate。
- watch函数的返回值：用来取消监听的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name
最低0.47元/天 解锁文章
扫一扫
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
