vue之watch用法
- 首先确认 watch是一个对象,一定要当成对象来用。
- watch适合于一个数据影响多个数据,computed:适合于多个变量或者对象进行处理后返回一个结果值
- watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,(或者是通过props传过来给子组件的数据),它可以监控一个变量,也可以是一个对象
对象就有键,有值。 我理解的是在vue中父组件通过 props 给子组件传递数据,然后在 input 通过 v-model 绑定,通过 watch 来把传递的 数据 变成 子组件的 初始值,可以通过 在 data 里 初始化一个 简单值 ,然后 通过 watch 来 监听 通过 props 来传入值的变化 ,然后 再进行 赋值,然后 就可以 通过 在 watch 里面 来 监听 要 变化的 值 来 进行 处理。
键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。
值:可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。
值也可以是函数名:不过这个函数名要用单引号来包裹。
第三种情况厉害了。
值是包括选项的对象:选项包括有三个。- 第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
- 第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
- 第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。
vue单文件组件写法:
<template>
//观察数据为字符串或数组
<input v-model="example0"/>
<input v-model="example1"/>
/当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数
<input v-model="example2.inner0"/>
</template>
<script>
export default {
data(){
return {
example0:"",
example1:"",
example2:{
inner0:1,
innner1:2
}
}
},
watch:{
example0(curVal,oldVal){
console.log(curVal,oldVal);
},
example1:'a',//值可以为methods的方法名
example2:{
//注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象
handler(curVal,oldVal){
conosle.log(curVal,oldVal)
},
deep:true
}
},
methods:{
a(curVal,oldVal){
conosle.log(curVal,oldVal)
}
}
}
</script>
总结:
watch: watch是一个对象,有键,有值
写法:
example(newval,oldval) {},
example:'a',//a是方法
example:{
handler(newval,oldval) {},
deep: true, (对对象进行深入监听,数组不需要深度监听)
immediate: true (最初绑定值也执行函数)
}
'example.aa':{}键值必须是一个字符串,所以用引号括起来