vue3中使用watch注意事项
程序员文章站
2022-03-13 08:21:46
编写watch函数需要编写两个参数,第一个是要监听的值,然后是一个回调函数。在函数中你可以获得到新知和老值。使用watch的时候同样需要先导入监听使用ref定义的变量的时候时候,第一个参数直接使用import {... , watch} from "vue"setup() { const selectGirl = ref(""); const data = reactive({ girls: ["a", "b", "c"], selectGirl...
编写watch函数需要编写两个参数,第一个是要监听的值,然后是一个回调函数。在函数中你可以获得到新知和老值。
使用watch的时候同样需要先导入
- 监听使用ref定义的变量的时候时候,第一个参数直接使用
import {... , watch} from "vue"
setup() {
const selectGirl = ref("");
const data = reactive({
girls: ["a", "b", "c"],
selectGirlFun: (index) => {
selectGirl.value = data.girls[index];
},
});
const refData = toRefs(data);
watch(selectGirl,(newValue, old) => {
console.log(1111,newValue,old)
});
return {
...refData,
selectGirl
};
},
- 使用reactive定义的变量需要没在监听的时候需要使用
函数返回值
的形式才能监听到
setup() {
const data = reactive({
girls: ["a", "b", "c"],
selectGirl: "",
selectGirlFun: (index) => {
data.selectGirl = data.girls[index];
},
});
const refData = toRefs(data);
onRenderTriggered((event) => {
console.log("状态触发组件--------------->");
console.log(event);
});
watch(()=> data.selectGirl,(newValue, old) => {
console.log(1111,newValue,old)
});
return {
...refData,
};
},
监听多个变量
参数需要写成数组的形式,同事返回的参数也是数组
setup() {
const data = reactive({
girls: ["a", "b", "c"],
selectGirl: "",
selectGirlFun: (index) => {
data.selectGirl = data.girls[index];
},
});
const refData = toRefs(data);
onRenderTriggered((event) => {
console.log("状态触发组件--------------->");
console.log(event);
});
watch([()=> data.girls,()=> data.selectGirl],(newValue, old) => {
console.log(1111,newValue[1],old[1])
});
return {
...refData,
};
},
其实与 watch 类似的 API 还有一个就是:watchEffect,立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更时重新运行该函数。
<template>
<button @click="change">count is: {{ state.count }}</button>
</template>
<script>
import { reactive, watchEffect } from 'vue'
export default {
setup () {
let state = reactive({count: 0})
let change = () => state.count++;
watchEffect(() => {
console.log(state.count, '改变')
})
return { state, change }
}
}
</script>
区分两者的区别
1、watch 是需要传入侦听的数据源,而 watchEffect 是自动收集数据源作为依赖。
2、watch 可以访问侦听状态变化前后的值,而 watchEffect 没有。
3、watch 是属性改变的时候执行,而 watchEffect 是默认会执行一次,然后属性改变也会执行。
本文地址:https://blog.csdn.net/pz1021/article/details/114266906