偵聽器

什么是偵聽器
偵聽器，也稱為監(jiān)聽器，Vue實(shí)例中提供了一個(gè)選項(xiàng)watch用于聲明一個(gè)監(jiān)聽變量的函數(shù)/方法，一旦被監(jiān)聽的變量中數(shù)據(jù)發(fā)生了變化，自動(dòng)執(zhí)行監(jiān)聽函數(shù)/方法中的代碼。
什么時(shí)候使用監(jiān)聽器
項(xiàng)目中需要跟隨數(shù)據(jù)的變化，執(zhí)行后續(xù)的功能函數(shù)(尤其是異步函數(shù)或者消耗資源較大的函數(shù))，可以通過偵聽器改善頁面渲染性能。
基本語法-監(jiān)聽普通數(shù)據(jù)

<div id="app">
      <p>消息數(shù)據(jù)：{{message}}</p>
      <button @click="changeMessage">修改數(shù)據(jù)</button>
</div>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
          el:"#app",
          data:{
                  message:'初始消息數(shù)據(jù)',
              },
        methods:{
              changeMessage(){
                    this.message="新消息"
                }
            }，
      watch:{
                "message":(newVal,oldVal)=>{
                  console.log("message變量中的數(shù)據(jù)發(fā)生了改變")
                   console.log(newVal,oldVal)
                  }
              }
        })

好了，普通變量數(shù)據(jù)的監(jiān)聽就是那么簡單，相信聰明的你學(xué)起來一定游刃有余！

那么接下來就看看如何監(jiān)聽變量中的數(shù)據(jù)吧！
我們直接用代碼展示

<div id="app">
        <p>對(duì)象數(shù)據(jù)：{{ user }}</p>
         <p>姓名：{{ user.name }}</p>
         <p>年齡：{{ user.age }}</p>
</div>
<script src="./vue.js"></script>
<script>
        const app = new Vue({
            el:"#app",
            data:{
                  user:{
                        name:'tom',
                        age:65
                        }
                      },
                watch:{
                          user:{
                                hander(newVal,oldVal){
                                  console.log("用戶修改了user屬性"）
                                  console.log(newVal,oldVal)
                                },
                            deep:true
                            }
                      }
                   }）

其實(shí)數(shù)組數(shù)據(jù)的監(jiān)聽就是添加一個(gè)deep:true選項(xiàng)，它的意思就是深度監(jiān)聽