vue之watch用法

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':{}键值必须是一个字符串，所以用引号括起来