真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

  
  
  



  
{{firstName + " " + lastName}}
  
{{firstName}} {{lastName}}

  
  
  



  
{{fullName()}} {{time}}

  
  
  



  
{{fullName}} {{time}}

結(jié)果如下：

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

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

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

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

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

  
  
  



  
{{fullName}} {{time}}

運行結(jié)果如下：

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

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

從上面的結(jié)果可以看出 computed 里面的方法被調(diào)用了，這是我們想要的結(jié)果，當跟 fullName 有關(guān)的 firstName 和 lastName 數(shù)據(jù)改變時計算屬性才會重新計算，當跟 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ù)，當我們在更改 fullName 的值時 DOM 會跟著改變，這個跟 firstName 和 lastName 數(shù)據(jù)更改是一樣的。但是當我們在 computed 里我們并沒有定義 fullName，當我們更改 fullName 的數(shù)據(jù)時，如下：

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

  
  
  



  
{{fullName}} {{time}}

運行結(jié)果如下：

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

上述就是小編為大家分享的什么是Vue 進階了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。