郑州快速建站价格,wordpress 404.3,seo 深圳,中国铁路建设行业协会网站一#xff0c;watch()简介#xff1a; 侦听一个或多个响应式数据源#xff0c;并在数据源变化时调用所给的回调函数 watch()默认是懒侦听的#xff0c;即仅在侦听源发生变化时才执行回调函数。 watch()一共有三个参数 第一个参数#xff1a;侦听器的源#xff0c;可以为以…一watch()简介 侦听一个或多个响应式数据源并在数据源变化时调用所给的回调函数 watch()默认是懒侦听的即仅在侦听源发生变化时才执行回调函数。 watch()一共有三个参数 第一个参数侦听器的源可以为以下几种 以函数形式返回一个值 一个ref 一个reactive响应式对象或者由以上类型的值组成的数组 。 第二个参数侦听源发生变化时调用的回调函数。这个函数接受三个参数 分别是新值旧值 用于注册副作用清理的回调函数可选可忽略 当侦听多个来源时回调函数接受两个数组分别对应来源数组中的新值和旧值。 第三个参数可选配置对象支持以下这些选项 immediate在侦听器创建是立即触发回调第一次调用时旧值是undefined值为 true 时一旦运行就会立即执行值为false时保持惰性。 deep值为 true 时可以监听对象所有属性值为 false 时保持更加具体特性必须指定到具体的属性上。 flush 回调的触发时机 1sync同步模式下执行 2pre在数据变化之前执行回调函数 3post在数据变化之后执行回调函数但是需要等待所有依赖项都更新后才执行 once: 每当被侦听源发生变化时侦听器的回调就会执行。如果希望回调只在源变化时触发一次请使用 once: true 选项。 1监听ref基本类型
templatediv div{{ msg }}/divbutton clickbtnclick改变数据/button/div
/template
script setup langtsimport { ref, watch } from vue;const msg refstring(pink)watch(msg,(newValue,oldValue){console.log(newValue,newValue); // coderkeyconsole.log(oldValue,oldValue); // pink}) const btnclick () {msg.value coderkey}
/script2监听reactive响应式对象
templatediv div{{ obj }}/divbutton clickbtnclick改变数据/button/div
/template
script setup langtsimport { computed, reactive, ref,watch } from vue;let obj reactiveany({name: pink,age: 18})// 此处作用避免打印newValue和oldValue都是最新的值因为引用同一块地址let deepObj computed((){return JSON.parse(JSON.stringify(obj))})watch(deepObj,(newValue,oldValue){console.log(newValue,newValue); // {name: coderkey, age: 18}console.log(oldValue,oldValue); // {name: pink, age: 18}})const btnclick () {obj.name coderkey}
/script3监听对象属性函数形式返回
templatediv div{{ obj.name }}/divbutton clickbtnclick改变数据/button/div
/template
script setup langts
import { computed, reactive, ref,watch } from vue;let obj reactiveany({name: pink,age: 18})watch(()obj.name,(newValue,oldValue){console.log(newValue,newValue); // coderkeyconsole.log(oldValue,oldValue); // pink},/* {immediate: true, // 立即调用 deep:false // 开启深度监听} */) const btnclick () {obj.name coderkey} /script4监听多个数据以上类型任意组合以数组形式
templatediv div{{ msg }}/divdiv{{ obj.age }}/divbutton clickbtnclick改变数据/button/div
/template
script setup langts
import { computed, reactive, ref,watch } from vue;
const msg refstring(pink)
let obj reactiveany({name: pink,age: 18})watch([msg,() obj.age],(newValue,oldValue){console.log(newValue,newValue); // [coderkey, 25]console.log(oldValue,oldValue); // [pink, 18]})const btnclick () {msg.value coderkeyobj.age 25}
/script5监听数组
templatediv div{{ arr}}/divbutton clickbtnclick改变数据/button/div
/template
script setup langts
import { computed, reactive, ref, watch } from vue;let arr reactiveArraystring([pink])let deepArr computed((){return JSON.parse(JSON.stringify(arr))})watch(deepArr,(newValue,oldValue){console.log(newValue,newValue); // [pink, coderkey]console.log(oldValue,oldValue); // [pink]})const btnclick () {arr[1] coderkey}
/script6监听路由
script setup langts
import { watch } from vue;
import { useRouter} from vue-router
const router useRouter()
// 监听当前路由信息
watch(() router.currentRoute.value,(newValue: any, oldValue: any) {console.log(newValue,newValue)},{ immediate: true } // 立即执行
)
/script二watchEffect watchEffect函数来创建高级侦听器。它不需要指定依赖项自动追踪响应式状态的变化并在变化时重新运行。一旦运行就会立即执行使用时不需要具体指定监听的谁回调函数内直接使用。只能访问当前最新的值访问不到修改之前的值。 templatediv div{{ obj.name }}/divbutton clickbtnclick改变数据/button/div
/template
script setup langts
import { reactive, watch, watchEffect } from vue;
let obj reactiveany({name: pink,age: 18})watchEffect((){console.log(obj.name); // 初次运行输出pink 而后点击按钮 监听到数据变化输出coderkey})const btnclick () {obj.name coderkey}
/script
