快捷導(dǎo)航

Vue 進(jìn)階之路（三）

更新時(shí)間：2019年04月18日 10:01:04 作者：豐寸

這篇文章主要介紹了Vue 進(jìn)階之路，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

<!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>

以上兩種寫法很明顯是可以這么做的，但是第一種我們?cè)?{{ }} 插值表達(dá)式內(nèi)進(jìn)行了代碼的計(jì)算，這是我們不建議使用方式，第二種是寫兩個(gè) {{ }} 插值表達(dá)式，看起來效果不錯(cuò)，但是如果我們要再拼接多個(gè)的話在 HTML 代碼中就顯得冗余了，后期也不好維護(hù)。接下來我們看一下如何在方法內(nèi)實(shí)現(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("計(jì)算了一次");
        return this.firstName + " " + this.lastName
      }
    }
  })
</script>
</body>
</html>

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

我們?cè)陧撁婕虞d的時(shí)候同時(shí)定義了一個(gè) time 的數(shù)據(jù)，當(dāng)我們更新這個(gè) time 數(shù)據(jù)的時(shí)候，結(jié)果如下：

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

我們?cè)賮砜匆幌吕帽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é)果如下：

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

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

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

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

我們?cè)賮砜匆幌掠?jì)算屬性 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("計(jì)算了一次");
        return this.firstName + " " + this.lastName;
      }
    }
  })
</script>
</body>
</html>

運(yùn)行結(jié)果如下：

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

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

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

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

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

我們發(fā)現(xiàn) DOM 并沒有更新，這跟 watch 比起來就顯得不友好了，其實(shí)在 computed 里有 get 和 set 兩個(gè)屬性，我們 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("計(jì)算了一次");
          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>

運(yùn)行結(jié)果如下：

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

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

您可能感興趣的文章: