vue中侦听器的使用

 什么是侦听器

允许开发者监听数据的变化，从而针对数据的变化做出特定的操作。

侦听器

【方法侦听器：

进入页面不会立马监听，但如果侦听的是一个对象，对象中的属性发生变化不会被侦听到】

【对象侦听器：

d进入页面会立马监听，可以通过deep选项，让侦听器深度侦听每一个属性。】

<script src="../jQuery.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const vm=new Vue({
      el:'#app',
      data:{
          username:'admin'
      },
      watch:{
           username(newVal,oldVal){方法格式
              console.log("username函数变化",newVal,oldVal)
              $.get('https://www.escook.cn/api/finduser/'+'newVal',function(res){
                  console.log(res)
               }
            }
       } 
     })

方法格式的侦听器

<script src="../jQuery.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const vm=new Vue({
      el:'#app',
      data:{
          username:'admin'
      },
      watch:{
          username:{//对象格式
            handler(newVal,oldVal){
              console.log(newVal,oldVal)
            },
            immediate:true//选项默认值是false，不会一进去就触发侦听器。
          }
      }
    })

对象格式的侦听器。

为了便捷，一般直接用方法格式。

深度侦听：如果watch侦听的是一个对象，如果对象属性值发生了变化，则无法被监听到。此时需要使用deep选项。

 const vm=new Vue({
      el:'#app',
      data:{
          info:{username:'admin'}
      },
      watch:{
        info:{
          handler(newVal){
            console.log(newVal)
          },
          //开启深度监听，只要对象中任何一个属性变化了，都会触发对事件的监听。
          deep:true
        }

若只是想监听数据中的某一个对象的某一属性，可以：

watch:{//如果侦听的是对象的子属性的变化，则必须包裹一层单引号。
        'info.username'(newVal){
          console.log(newVal)
        }