vue3中watchEffect的作用和适用方法

前言

该文章是Vue3好玩的API-watchEffect观后的记录文章，个人觉得UP主分析的不错。

watch 和 watchEffect

首先是一个可能存在的误区，把 watchEffect 认为是和 watch 一样监听变量。实际上不是这样的， watchEffect 在官方文档中被定义为副作用函数，因此围绕副作用这个词对这个api做进一步解释。

什么是副作用

vue3的核心思想是 Composition API，可能大家听过在 react 中有一个公式叫做 UI = Fn()，即组件为函数，而其中所有的非数据渲染操作统一被称之为副作用，例如异步请求，定时器，操作DOM等等。 watchEffect 就是一个用于管理副作用的 API。

生命周期思维方式

例如有一个需求，从接口获取一个 list，然后通过 v-for 渲染到页面中。
vue2的习惯是在生命周期钩子函数中处理请求，然后通过响应式变量赋值的方式去渲染页面。

// 模拟请求
function fetchListData() {
	return new Promise((resolve) => {
		setTimeout(() => {
			resolve(["111", "222", "333"])
		}, 2000)
	})
}

// xxx.vue
mounted() {
	fetchListData().then(res => this.list = res);
}

副作用思维方式

vue3中虽然也可以适用生命周期实现该功能，但同样 watchEffect 也可以做到。

const rList = ref([]);

watchEffect(() => {
	fetchListData().then(res => this.rList = res);
})

结论

表面上看实际上 watchEffect 和2代的生命周期处理形式没有多少差别，实际上这也是3代做的一个思维上的转变。