vue3watch和watcheffech区别_计算属性和watch的区别

编程小6 后端 (6) 2024-04-12 10:23

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说vue3watch和watcheffech区别_计算属性和watch的区别,希望能够帮助你!!!。
Vue3系列——computed、watch

Computed

计算属性computed是依赖于使用它的数据，当数据发生变化时，自定义方法重新调用执行一次计算属性，监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。

其语法格式如下：

<script setup>
import { computed } from 'vue'
const 变量名 = computed(()=>{		// 定义计算属性 	return 基于响应式数据做计算之后的值
})
</script>

示例代码如下：

<script setup>
import { ref, computed } from 'vue'
const list = ref([1, 2, 3, 4, 5, 6, 7, 8])   // 定义变量 const computedlist = computed(() => {		// 定义计算属性   return list.value.filter((item) => item > 2)  // 返回数据大于2的参数 })
setTimeout(() => {list.value.push(9, 10)}, 3000)  // 3秒后，list数组增加9、10元素 </script>

<template>
  <div>原始响应式数组-{{ list }}</div>
  <div>计算属性数组-{{ computedlist }}</div>
</template>

在示例代码中，我们定义了list数组和计算属性，计算属性返回值通过变量名为computedlist来接收，通过setTimeout定时器将list数组值改变，当3秒后，list数组增加9、10元素。

注意：

计算属性中不应该有其他操作，例如异步请求、修改dom；
避免直接修改计算属性的值，计算属性应该是只读的；

计算属性可用于性能开销比较大的时候，有效的缓存可以很大程度上减少开销。

watch

当需要在数据变化时执行异步或开销较大的操作时，computed是无法操作异步数据的，所以需要使用watch进行侦听。

侦听器watch作用是侦听一个或多个数据的变化，数据变化时执行的回调函数，两个额外参数：immediate（立即执行）和deep（深度侦听）

侦听单个数据

其语法格式如下：

<script setup>
import { ref , watch} from 'vue'
const 变量名=ref()
watch(侦听的变量名,(newValue,oldValue)=>{
	console.log('count发生了变化，旧值为${oldValue},新值为${newValue}')
})
</script>

示例代码如下：

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)	 // 定义变量 const setCount = () => {	// 定义方法   count.value++
}
watch(count, (newVal, oldVal) => {		// 监听   console.log('变化了', newVal, oldVal)
})
</script>

<template>
  <div>
    <button @click="setCount">+{{ count }}</button>
  </div>
</template>

在示例代码中，当我们点击button按钮，控制台就会输出变化前后的值，如下图所示：

vue3watch和watcheffech区别_计算属性和watch的区别_https://bianchenghao6.com/blog_后端_第2张

侦听多个数据

watch除了侦听单个数据，还可以侦听多个响应式数据变化，不管哪个数据变化都需要执行回调，其语法格式如下：

<script setup>
import { ref , watch} from 'vue'
const 变量名1=ref()
const 变量名2=ref()
// 侦听多个数据源 watch([变量名1,变量名2],([newValue1,newValue2],[oldValue1,oldValue2])=>{
	console.log('变量名1或变量名2发生了变化',[newValue1,newValue2],[oldValue1,oldValue2])
})
</script>

示例代码如下：

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)	// 定义变量count const changeCount = () => {count.value++}   // 定义方法changeCount改变变量count值 const name = ref('白巧克力')		// 定义变量name const changeName = () => {name.value = '白巧克力LIN'}  // 定义方法changeName改变变量name值 watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log('count或name发生了变化', [newCount, newName], [oldCount, oldName])
})
</script>

<template>
  <div><button @click="changeCount">修改count-{{ count }}</button></div>
  <div><button @click="changeName">修改Name-{{ name }}</button></div>
</template>

在示例中，点击不同的按钮，控制台会输出不同的数据，如下图所示：

vue3watch和watcheffech区别_计算属性和watch的区别_https://bianchenghao6.com/blog_后端_第4张

immediate

在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调，其语法格式如下：

<script setup>
import { ref , watch} from 'vue'
const 变量名=ref()
watch(侦听的变量名,(newValue,oldValue)=>{
	console.log('count发生了变化，旧值为${oldValue},新值为${newValue}')
},{ immediate :true})
</script>

示例代码如下：

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)	 // 定义变量 const setCount = () => {	// 定义方法   count.value++
}
watch(count, (newVal, oldVal) => {		// 监听   console.log('变化了', newVal, oldVal)
},{immediate:true})
</script>

<template>
  <div>
    <button @click="setCount">+{{ count }}</button>
  </div>
</template>

运行结果如下：

vue3watch和watcheffech区别_计算属性和watch的区别_https://bianchenghao6.com/blog_后端_第6张

deep

通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，示例代码如下：

<script setup>
import { ref, watch } from 'vue'
const state = ref({ count: 0 })				// 定义变量 watch(state, () => console.log('数据变化了')) // 侦听变量 const change = () => {state.value.count++}	// 修改变量值 change()		// 调用change方法 </script>

运行上面代码，控制台不会有任何反应，这时我们只需要添加deep参数即可，代码如下：

<script setup>
import { ref, watch } from 'vue'
const state = ref({ count: 0 })				// 定义变量 watch(state, () => console.log('数据变化了'),{deep:true}) // 侦听开启深度侦听变量 const change = () => {state.value.count++}	// 修改变量值 change()		// 调用change方法 </script>

这时控制台就会输出数据变化了。

精确侦听对象的某个属性

假如在一个对象中，有很多个属性，但我们只需要侦听一个属性的变化，开启deep深度侦听会损耗性能，那么我们可以精确侦听对象的某个属性，其语法格式如下：

<script setup>
import { ref , watch} from 'vue'
const 变量名=ref()
watch(
	()=>变量名.属性,
	()=>console.log('age发生变化了')
)
</script>

示例代码如下：

<script setup>
import { ref, watch } from 'vue'
const state = ref({
  name: '白巧克力',
  age: 18
})
const changeName = () => {
  state.value.name = '白巧克力LIN'
}
const changeAge = () => {
  state.value.age = 20
}
watch(
  () => state.value.age,
  () => {
    console.log('age变化了')
  }
)
</script>

<template>
  <div>当前name--{{ state.name }}</div>
  <div>当前age--{{ state.age }}</div>
  <div><button @click="changeName">修改Name-{{ state.name }}</button></div>
  <div><button @click="changeAge">修改Name-{{ state.age }}</button></div>
</template>