Vue.js - watch侦听器

目录

1.0  watch侦听器的基本使用

1.0.1  所有的侦听器,都应该被定义到 watch 节点下

1.0.2  在侦听器中使用 jQuery 中的 Ajax  发起请求

2.0  侦听器的格式

2.0.1  方法格式的侦听器

2.0.2  对象格式的侦听器

handler 方法:

immediate 属性:

3.0  深度侦听 deep

deep 属性:

---

1.0  watch侦听器的基本使用

1.0.1  所有的侦听器,都应该被定义到 watch 节点下

  watch: {
          // 侦听器本质是一个函数,要侦听哪个数据的变化,就把数据名作为方法名即可
          username(newVal,oldVal) {
              console.log('侦听到 username 变化了',newVal,oldVal)
           }
   }

  侦听器函数里有两个参数，newVal 代表变化后的新值，oldVal 代表变化前的旧值。

1.0.2  在侦听器中使用 jQuery 中的 Ajax  发起请求

username(newVal,oldVal) {
       console.log('侦听到 username 变化了',newVal,oldVal)
       // 如果输入为空,则不发出请求
       if (newVal === '') return
       // 1.调用 jQuery 中的 Ajax 发起请求,判断 newVal 是否被占用
       $.get('https://www.escook.cn/api/finduser/' + newVal,function (result) {
            console.log(result)
       })
 }

2.0  侦听器的格式

2.0.1  方法格式的侦听器

• 缺点1：无法在刚进入页面的时候，自动触发！！！

• 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！

2.0.2  对象格式的侦听器

• 好处1：可以通过 immediate 选项，让侦听器自动触发！！！

• 好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！

handler 方法:

watch: {
   // 侦听器本质是一个函数,要侦听哪个数据的变化,就把数据名作为方法名即可
   username: {
     // 侦听器的处理函数
     handler(newVal,oldVal){
         console.log(newVal,oldVal)
     },
   }
},

immediate 属性:

•  immediate 的值是布尔值
•  immediate 选项的默认值是 false
•  immediate 的作用是: 可控制侦听器是否自动触发一次

3.0  深度侦听 deep

       当侦听的是对象时，单单使用对象格式的侦听器，是无法侦听到对象里面的属性变化的；这时开启深度监听,只要对象中任何一个属性变化了,都会触发对象的侦听器。

deep 属性:

• deep 的值是布尔值
• deep 的默认值是 false
• deep 的作用是: 可控制侦听器是否深度监听

<div id="app">
        <input type="text" v-model="info.username">
</div>

<script>
    const vm = new Vue({
         el: '#app',
         data: {
             // 用户的信息对象
             info:{
                    username:'admin',
              }
          },
          watch: {
             info: {
                 handler(newVal) {
                     console.log(newVal)
                     console.log(newVal.username)
                 },
                 // 注意: deep 写在监听对象里面
                 // 开启深度监听,只要对象中任何一个属性变化了,都会触发对象的侦听器
                 deep: true,
            },
          }
     })
</script>

 如果要侦听的是对象的子属性的变化,则必须包裹一层单引号

'info.username'(newVal) {
         console.log(newVal)
   }