2025年vue中插槽的用法（vue插槽使用场景）

11月6号笔记

今日所学：VUE监听器：watch、watchEffect

Watch监听器：

和计算属性相似，都是针对响应式API进行的一种处理操作而已。不同于先前所提及的属性计算，监听器更强调于“监听”二字，既用于执行在数据变化时执行复杂操作。

下文摘自“咸虾米”老师的博客：

“

在Vue 3中，computed和watch都是用于响应式地处理数据变化的工具，但它们有一些重要的异同点。

异同点如下：

计算属性 (Computed):

计算属性是基于它们的依赖进行缓存的。只有在依赖发生变化时，计算属性才会重新计算，可以避免不必要的重复计算。

计算属性适用于派生出一些新的数据，比如对数据进行过滤、排序、格式化等操作。

计算属性可以像普通属性一样使用，而不需要在模板中调用方法。

计算属性中的函数必须有return返回值

监听属性 (Watch):

监听属性允许我们在数据变化时执行异步操作或复杂的逻辑。

监听属性适用于对数据变化做出响应，比如在数据变化时发送请求、处理副作用等。

监听属性可以监听一个或多个数据的变化，并在数据变化时执行相应的操作。

监听属性中的函数不是必须要用return返回值。

相似之处:

计算属性和监听属性都可以依赖于响应式数据。

它们都可以用于监测数据的变化，并作出相应的处理。

总的来说，计算属性适用于派生出新的数据，而监听属性适用于在数据变化时执行异步操作或复杂逻辑。

————————————————

原文链接：https://blog.csdn.net/qq_18798149/article/details/135302780

”

简单来说，计算属性强调于“缓存”，以此来减少运行过程；而监听器强调“复杂”，用于处理“异步操作”等复杂行为。

监听器的基本格式：监听对象、回调函数（包含新的值和后值）。

Watch（监听对象，（新的值，旧的值）=>{ 根据回调参数运行的内容 }）

示例如下。

*注意：由于computed不支持异步操作，这就意味着axios中的post等基于promise的异步操作是无法基于computed实现的，这时候就需要用watch来作为替代了。

但是存在问题，上述的这一个实现方法对于一个简单的只有value的ref对象是确实可以实现效果的，但是对于复杂的就不行了，如person的定义修改为如下形式。

在这一种情况下，直接通过input来修改person.name是不会触发监听器的。这是由于该监听器只是用于监测这个命名和后续的ref，而虽然修改了name属性，但是ref并没有发生改变。而正常的ref则是由于更改后其实是指向变化，所以可以监听到改变。

如果需要进行深度监听，可以设置深度监听为true即可。

但是有一点出人意料的是，我将person的监听指向更改为person.value，又可以实现正常监听了。文星一言是这么回答的：

“在你的例子中，person是一个使用ref创建的响应式引用，因此你需要通过person.value来访问或修改其内部的name和age属性。当你设置监听器时，如果你直接监听person，你实际上是在监听这个包装对象本身，而不是它内部的value。

但是，当你将监听器更改为监听person.value时，你实际上是在监听person引用的内部值，也就是那个包含name和age属性的对象。因此，当你修改person.value.name时，你正在修改这个内部对象的属性，而监听器正是设置在这个内部对象上的，所以监听器会被触发。”

这也确实是一个合理的解释，既将一个复合对象作为值来进行数据的监听和判断。但是还是建议用深度监听，那就直接深度监听了。

如果需要直接监听单个属性，直接构造一个指向即可。

*注意：这里通过一个()=>箭头函数来确保返回的数据是一个响应式数据，用于触发监听器。如果直接使用person.value.name，则只监测这样一个string变量了，这就不符合“监听器监听响应式API”的规范了。而使用箭头函数，则会返回一个“响应式引用”，这样就符合了“监视源只能是getter/effect函数、ref、响应对象或这些类型的数组。”的基本要求了，作为一个响应对象来符合。

*注意；虽然深度监听好用，但是这就意味着其要监听整个对象树，消耗资源是肯定的。

如果需要立即执行，在watch的属性设置处添加immediate为true即可。

同样，监听不会受限于单个数据，也可以多个数据同时监听，直接监听一个响应式对象数组即可。

当然，像这样进行数据指向的声明固然是完备的，但是每一次构建都需要一次声明，这并不是一种相对高效的方式。这一情况下我们可以使用watcheffect来进行代替。它会直接去函数内部搜索需要的作为参数的响应式API，进而减少响应式API的指向编写。

所有内容的实现代码如下：

2025年vue中插槽的用法（vue插槽使用场景）

相关推荐