Vue經常使用特性-計算屬性computed 和偵聽器 watch

時間 2020-11-30

標籤 javascript vue java 緩存 app 異步 this spa code 對象欄目 JavaScript 简体版

原文原文鏈接

1.計算屬性 computed

1.1爲什麼須要計算屬性？javascript

模板中放入太多的邏輯會讓模板太重且難以維護使用計算屬性可讓模板更加的簡潔vue

1.2.計算屬性與方法的區別 java

計算屬性是基於它們的依賴進行緩存的緩存

方法不存在緩存app

1.3.計算屬性是基於它們的響應式依賴進行緩存的異步

1.4.computed比較適合對多個變量或者對象進行處理後返回一個結果值，也就是數多個變量中的某一個值發生了變化則咱們監控的這個值也就會發生變化this

 <div id="app">
     <!--  
        當屢次調用 reverseString  的時候 
        只要裏面的 num 值不改變 他會把第一次計算的結果直接返回
        直到data 中的num值改變 計算屬性纔會從新發生計算
     -->
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>
     <!-- 調用methods中的方法的時候  他每次會從新調用 -->
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
  </div>
  <script type="text/javascript">
    /*
      計算屬性與方法的區別:計算屬性是基於依賴進行緩存的，而方法不緩存
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log('methods')
          return this.msg.split('').reverse().join('');
        }
      },
      //computed  屬性 定義 和 data 已經 methods 平級 
      computed: {
        //  reverseString   這個是咱們本身定義的名字 
        reverseString: function(){
          console.log('computed')
          var total = 0;
          //  當data 中的 num 的值改變的時候  reverseString  會自動發生計算  
          for(var i=0;i<=this.num;i++){
            total += i;
          }
          // 這裏必定要有return 不然 調用 reverseString 的 時候沒法拿到結果    
          return total;
        }
      }
    });
  </script>

2.偵聽器 watch

偵聽器的應用場景spa

數據變化時執行異步或開銷較大的操做code

使用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>

案例：驗證用戶名是否可用

需求：輸入框中輸入姓名，失去焦點時驗證是否存在，若是已經存在，提示重新輸入，若是不存在，提示能夠使用。

案例：需求分析

① 經過v-model實現數據綁定

② 須要提供提示信息

③ 須要偵聽器監聽輸入信息的變化

④ 須要修改觸發的事件

<body>
    <div id="app">
        <div>
            <span>用戶名：</span>
            <span>
                <input type="text" v-model.lazy='uname'>
            </span>
            <span>{{tip}}</span>
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        //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>
</body>