Vue框架之偵聽器

◆ 偵聽器：

• 使用watch來響應數據的變化
• 一般用於異步或者開銷較大的操作
• watch 中的屬性 一定是data 中 已經存在的數據
• 當需要監聽一個對象的改變時，普通的watch方法無法監聽到對象內部屬性的改變，只有data中的數據才能夠監聽到變化，此時就需要deep屬性對對象進行深度監聽

<div id="app">
        <div>
            <span>名：</span>
            <span>
        <input type="text" v-model='firstName'>
      </span>
        </div>
        <div>
            <span>姓：</span>
            <span>
        <input type="text" v-model='lastName'>
      </span>
        </div>
        <div>{{fullName}}</div>
    </div>

  <script type="text/javascript">
        /*
              偵聽器
            */
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Jim',
                lastName: 'Green',
                // fullName: 'Jim Green'
            },
             //watch  屬性 定義 和 data 已經 methods 平級 
            watch: {
                //   注意：  這裏firstName  對應着data 中的 firstName 
                //   當 firstName 值 改變的時候  會自動觸發 watch
                firstName: function(val) {
                    this.fullName = val + ' ' + this.lastName;
                },
                //   注意：  這裏 lastName 對應着data 中的 lastName 
                lastName: function(val) {
                    this.fullName = this.firstName + ' ' + val;
                }
            }
        });
    </script>

◆ 偵聽器示例：

<div id="app">
  <div>
    <span>用戶名：</span>
    <span>
      <input type="text" v-model.lazy='uname'>
    </span>
    <span>{{tip}}</span>
  </div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
  /*      
    偵聽器
    1、採用偵聽器監聽用戶名的變化
    2、調用後臺接口進行驗證
    3、根據驗證的結果調整提示信息
  */
  var vm = new Vue({
    el: '#app',
    data: {
      uname: '',
      tip: ''
    },
    methods: {
      checkName: function(uname) {
        // 調用接口，但是可以使用定時任務的方式模擬接口調用
        var that = this;
        setTimeout(function(){
          // 模擬接口調用
          if(uname == 'admin') {
            that.tip = '用戶名已經存在，請更換一個';
          }else{
            that.tip = '用戶名可以使用';
          }
        }, 2000);
      }
    },
    watch: {
      uname: function(val){
        // 調用後臺接口驗證用戶名的合法性
        this.checkName(val);
        // 修改提示信息
        this.tip = '正在驗證...';
      }
    }
  });

</script>