欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 進階之路（三）

 更新時間：2019年04月18日 10:01:04   作者：豐寸  
這篇文章主要介紹了Vue 進階之路，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

之前的文章我們已經(jīng)對 vue 有了初步認識，這篇文章我們通過一個例子說一下 vue 的方法 methods，計算屬性 compited 和監(jiān)聽器 watch。

現(xiàn)在我們有一個需求，變量 firstName = "hello"，變量 lastName = "world"，我們需要將這兩個變量拼接到在前端展示，最基本的我們可以想到的就是：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <p>{{firstName + " " + lastName}}</p>
  <p>{{firstName}} {{lastName}}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      firstName: 'hello',
      lastName: 'world',
    },
  })
</script>
</body>
</html>

以上兩種寫法很明顯是可以這么做的，但是第一種我們在 {{ }} 插值表達式內(nèi)進行了代碼的計算，這是我們不建議使用方式，第二種是寫兩個 {{ }} 插值表達式，看起來效果不錯，但是如果我們要再拼接多個的話在 HTML 代碼中就顯得冗余了，后期也不好維護。接下來我們看一下如何在方法內(nèi)實現(xiàn)：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <p>{{fullName()}} {{time}}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      firstName: 'hello',
      lastName: 'world',
      time: 1
    },
    methods:{
      fullName(){
        console.log("計算了一次");
        return this.firstName + " " + this.lastName
      }
    }
  })
</script>
</body>
</html>

上面的代碼我們在 methods 里定義了一個 fullName 的方法，然后通過 {{ }} 插值表達式放在 HTML 里，當(dāng)頁面加載的時候直接調(diào)用，運行結(jié)果如下：

我們在頁面加載的時候同時定義了一個 time 的數(shù)據(jù)，當(dāng)我們更新這個 time 數(shù)據(jù)的時候，結(jié)果如下：

我們發(fā)現(xiàn)當(dāng)我們更新 time 數(shù)據(jù)的時候，fullName 方法也調(diào)用了一次。這顯然不是很理想的。

我們再來看一下利用監(jiān)聽器 watch 方法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <p>{{fullName}} {{time}}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      firstName: 'hello',
      lastName: 'world',
      fullName: 'hello world',
      time: 1
    },
    watch: {
      firstName() {
        console.log("firstName 更改了");
        this.fullName = this.firstName + " " + this.lastName;
      },
      lastName() {
        console.log("lastName 更改了");
        this.fullName = this.firstName + " " + this.lastName;
      }
    }
  })
</script>
</body>
</html>

結(jié)果如下：

我們在 Vue 實例的 watch 屬性里定義了兩個方法 firstName 和 lastName，watch 屬性中方法名和 data 屬性里的數(shù)據(jù)變量名相同，表示會實時監(jiān)聽該數(shù)據(jù)的變化，如果監(jiān)聽到變化時會實時更新 DOM。

我們先來看一下當(dāng)跟 methods 方法那樣更新 time 數(shù)據(jù)時的變化：

我們可以看出當(dāng) time 數(shù)據(jù)更新時并沒有調(diào)用 firstName 和 lastName 里的數(shù)據(jù)。當(dāng)我們更新 firstName 和 lastName 的數(shù)據(jù)時，結(jié)果如下：

我們可以看出當(dāng)我們更新 firstName 或者 lastName 的數(shù)據(jù)時，fullName 數(shù)據(jù)才會更新，這說明當(dāng)數(shù)據(jù)掛載到 DOM 上的時候會緩存起來，如果數(shù)據(jù)不更新，則還會繼續(xù)使用緩存的數(shù)據(jù)，當(dāng)數(shù)據(jù)更新時才會調(diào)用 watch 里面的方法，這就比 methods 的方法要好很多。

我們再來看一下計算屬性 computed：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <p>{{fullName}} {{time}}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      firstName: 'hello',
      lastName: 'world',
      time: 1
    },
    computed:{
      fullName(){
        console.log("計算了一次");
        return this.firstName + " " + this.lastName;
      }
    }
  })
</script>
</body>
</html>

運行結(jié)果如下：

我們可以看出跟 watch 比，我們并沒有在 data 里定義 fullName 數(shù)據(jù)，而是在 computed 屬性里直接定義 fullName 然后 return 出 firstName 和 lastName 的拼接結(jié)果，當(dāng)頁面呈現(xiàn)時，從輸出結(jié)果可以看出會走一次計算屬性，當(dāng)我們改變 time 數(shù)據(jù)時：

可以看出 computed 里的方法沒有被調(diào)用，當(dāng)我們改變 firstName 或者 lastName 的數(shù)據(jù)時，結(jié)果如下：

從上面的結(jié)果可以看出 computed 里面的方法被調(diào)用了，這是我們想要的結(jié)果，當(dāng)跟 fullName 有關(guān)的 firstName 和 lastName 數(shù)據(jù)改變時計算屬性才會重新計算，當(dāng)跟 fullName 無關(guān)的 time 數(shù)據(jù)變化時會用之前緩存的數(shù)據(jù)，這正是我們想要的結(jié)果。

以上三種方法進行比較我們可以得知 methods 方法是最不理想的，監(jiān)聽器 watch 和 計算屬性 computed 兩種方法的運行結(jié)果是一樣的，但是 計算屬性 computed 方法更簡單一些。所以在 watch 和 computed 兩種方法都能實現(xiàn)的時候我們更推薦使用 computed 方法。

但是上面的 watch 和 computed 兩個方法里有個問題，就是 watch 里我們在 data 里定義了一個 fullName 的數(shù)據(jù)，當(dāng)我們在更改 fullName 的值時 DOM 會跟著改變，這個跟 firstName 和 lastName 數(shù)據(jù)更改是一樣的。但是當(dāng)我們在 computed 里我們并沒有定義 fullName，當(dāng)我們更改 fullName 的數(shù)據(jù)時，如下：

我們發(fā)現(xiàn) DOM 并沒有更新，這跟 watch 比起來就顯得不友好了，其實在 computed 里有 get 和 set 兩個屬性，我們 computed 的 fullName 方法改成如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <p>{{fullName}} {{time}}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      firstName: 'hello',
      lastName: 'world',
      time: 1
    },
    computed: {
      fullName: {
        get() {
          console.log("計算了一次");
          return this.firstName + " " + this.lastName;
        },
        set(value) {
          console.log(value);
          var result = value.split(" ");
          this.firstName = result[0];
          this.lastName = result[1];
        }

      }
    }
  })
</script>
</body>
</html>

運行結(jié)果如下：

可以看出當(dāng)我們通過 get 和 set 就可以改變 fullName 的值使 DOM 更新了。當(dāng)頁面更新的時候先觸發(fā) fullName 中的 get 方法，并返回 fullName，當(dāng)我們改變 time 時，fullName 所依賴的 firstName 和 lastName 并沒有更改，所以就 fullName 就會去取緩存的值，在 fullName 的 set 方法里可以傳一個 value 的參數(shù)，通過打印我們可以看出 value 值就是我們直接改變 fullName 的值，我們就可以通過該值來賦值改變 firstName 和 lastName，這樣 fullName 所依賴的 firstName 或 lastName 改變時 DOM 就會實時更新了。

以上所述是小編給大家介紹的Vue 進階之路詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論