iis配置网站无法浏览,龙华区是深圳最差的区,wordpress导航菜单,电商服务站点建设方案在 Vue 3 中#xff0c;监听器#xff08;watch#xff09;是用来观察响应式数据的变化#xff0c;并在数据发生变化时执行相应操作的机制。watch 主要用于响应式数据变化时的副作用处理#xff0c;比如异步操作、数据更新等。
1. 基础使用
在 Vue 3 中#xff0c;watc…在 Vue 3 中监听器watch是用来观察响应式数据的变化并在数据发生变化时执行相应操作的机制。watch 主要用于响应式数据变化时的副作用处理比如异步操作、数据更新等。
1. 基础使用
在 Vue 3 中watch 是作为一个组合式 API 提供的可以在 setup 函数中使用它来监听响应式变量的变化。
templatedivpCount: {{ count }}/pbutton clickincrementCountIncrease/button/div
/templatescript
import { ref, watch } from vue;export default {setup() {const count ref(0);// 使用常规函数来监听 countwatch(count, function (newValue, oldValue) {console.log(Count changed from oldValue to newValue);});function incrementCount() {count.value;}return { count, incrementCount };}
}
/script在这个例子中watch 用来监听 count 变量的变化当 count 改变时回调函数会被触发打印出 count 的旧值和新值。
2. 监听多个变量
watch 也可以监听多个响应式变量只需要将它们作为数组传递给 watch。
templatedivpName: {{ name }}/ppAge: {{ age }}/pbutton clickchangeNameChange Name/buttonbutton clickchangeAgeChange Age/button/div
/templatescript
import { ref, watch } from vue;export default {setup() {const name ref(Bob);const age ref(25);// 监听多个变量并使用普通函数watch([name, age], function (newValues, oldValues) {console.log(Name changed from oldValues[0] to newValues[0]);console.log(Age changed from oldValues[1] to newValues[1]);});function changeName() {name.value Alice;}function changeAge() {age.value 30;}return { name, age, changeName, changeAge };}
}
/script这里watch 监听了 name 和 age 两个变量回调函数会在任意一个变量发生变化时触发。
3. 深度监听
有时我们需要监听一个对象或数组的内部变化而不仅仅是它的引用变化这时可以使用 deep 选项。
templatedivp{{ user }}/pbutton clickuser.name CharlieChange Name/button/div
/templatescript
import { ref, watch } from vue;export default {setup() {const user ref({ name: Alice, age: 30 });// 使用普通函数进行深度监听watch(user, function (newValue, oldValue) {console.log(User changed:, newValue);}, { deep: true });return { user };}
}
/script在这个例子中watch 会监听 user 对象的任何属性变化甚至是 name 和 age 字段的内部变化。
4. 立即执行监听器
有时我们希望在组件初始化时就立即执行一次监听器而不仅仅是在数据发生变化时。可以通过 immediate 选项来实现。
templatedivpMessage: {{ message }}/pbutton clickmessage Hello, Vue!Change Message/button/div
/templatescript
import { ref, watch } from vue;export default {setup() {const message ref(Welcome);// 使用普通函数并立即执行监听器watch(message, function (newValue, oldValue) {console.log(Message changed from oldValue to newValue);}, { immediate: true });return { message };}
}
/script在这个例子中watch 在组件创建时立即执行一次输出 message 的初始值。
5. 异步操作
watch 中的回调函数可以是异步的可以用于异步操作比如请求数据等。
templatedivpQuery: {{ query }}/pbutton clickquery Vue 3Search for Vue 3/button/div
/templatescript
import { ref, watch } from vue;export default {setup() {const query ref();// 使用普通函数处理异步操作watch(query, function (newQuery) {if (newQuery) {fetch(https://api.example.com/search?q newQuery).then(response response.json()).then(data {console.log(data);});}});return { query };}
}
/script在这个例子中当 query 变化时会发起一个异步请求并打印返回的数据。
6. 停止监听
如果需要停止监听可以使用 watch 的返回值它是一个函数调用该函数可以停止监听。
templatedivpCount: {{ count }}/pbutton clickstopWatchingStop Watching/button/div
/templatescript
import { ref, watch } from vue;export default {setup() {const count ref(0);// 使用普通函数监听 countconst stop watch(count, function (newValue, oldValue) {console.log(Count changed from oldValue to newValue);});// 停止监听function stopWatching() {stop(); // 停止监听}return { count, stopWatching };}
}
/script总结
在 Vue 3 中watch 作为一个组合式 API 提供了灵活的监听数据变化的能力。你可以
监听单个或多个响应式变量。使用 deep 选项监听对象的深层变化。使用 immediate 选项让监听器立即执行。处理异步操作。在需要时停止监听。
