2021/9/27 北京 watch、@keyup.enter

回车键弹起时触发事件

@keyup.enter='showIfo'

---

watch用来监听属性

可以监听一般意义上的属性，比如data{ }的isHot.。也可以监听计算属性

data:{
    isHot:true,
}

handler函数

        用watch监听，一定要有handler函数，它有俩个参数（oldValue,newValue），只有监听的属性变化时，它才能监听到。当然也可以一上去就监听，加一个immediate。

        data:{
            isHot:true,
        },
        watch:{
            isHot:{
                //监听的isHot模型数据发生改变时，handler()被调用
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newvalue,oldValue)
                }
            }
        }

---

watch监听一个对象里的某一个属性，注意写法就好,如：  'numbers.a'

你要是监听numbers,改变numbers.a，那么watch会察觉到numbers变化了吗，答案：不会。所以，怎么办呢？引出来了另一个关键词deep,深度监听。

<div id="app">
    a:<input type="text" v-model="numbers.a">
    b:<input type="text" v-model="numbers.b">
    <p>a:{{numbers.a}}</p>
    <p>b:{{numbers.b}}</p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app",
        data: {
            numbers: {
                a: 0,
                b: 0
            }
        },
        watch: {
            numbers: {
                //监听的isHot模型数据发生改变时，handler()被调用
                handler(newValue, oldValue) {
                    console.log('numbers被修改了', newvalue, oldValue)
                }
            }
        }
    });
</script>

要想让watch能监听到numbers变化，watch里要加deep,深度监听。​​​​​​​

        watch: {
            numbers: {
                deep:true,
                //监听的isHot模型数据发生改变时，handler()被调用
                handler(newValue, oldValue) {
                    console.log('numbers被修改了', newValue, oldValue)
                }
            }
        }

 

---

除了监听numbes对象，也可以监听对象里面的属性a，这时“”不能省略了

        watch: {
            "numbers.a": {
                //监听的isHot模型数据发生改变时，handler()被调用
                handler(newValue, oldValue) {
                    console.log('a被修改了', newValue, oldValue)
                }
            }
        }

 

---

除了deep，还有一个属性immediate，让初始化时让handler调用一下

data:{
isHot:true,
},
watch:{
 isHot:{
   immediate:true,//初始化时让handler调用一下
   deep:true,//深度监听
   handler(newValue,oldValue){
    console.log('isHot被修改了',newvalue,oldValue)
  }
 }
}

---

watch监听的代码简写

如果watch里没有immediate和deep，可以简写，把watch监听属性写的像个函数。

data:{
isHot:true,
},
watch:{
  //简写
  isHot(newValue,oldValue){
    console.log('isHot被修改了',newvalue,oldValue)
  }
}