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

深入對(duì)Vue.js $watch方法的理解

 更新時(shí)間：2017年03月20日 08:22:55   作者：阿飛22  
本篇文章主要介紹了深入對(duì)Vue.js $watch方法的理解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧。

博主最近對(duì)著vue.js的官方教程在自學(xué)vue.js，博主自幼愚鈍，在教程中真的是好多點(diǎn)都不太理解，接下來要說的這個(gè)$watch方法就是其中一個(gè)不太理解的點(diǎn)了。咱們先來看一下對(duì)于$watch方法在vue.js的API中是怎么解釋的吧：觀察 Vue 實(shí)例變化的一個(gè)表達(dá)式或計(jì)算屬性函數(shù)?；卣{(diào)函數(shù)得到的參數(shù)為新值和舊值。表達(dá)式只接受監(jiān)督的鍵路徑。對(duì)于更復(fù)雜的表達(dá)式，用一個(gè)函數(shù)取代。官方示例：

// 鍵路徑
vm.$watch('a.b.c', function (newVal, oldVal) {
 // 做點(diǎn)什么
})
// 函數(shù)
vm.$watch(
 function () {
  return this.a + this.b
 },
 function (newVal, oldVal) {
  // 做點(diǎn)什么
 }
)

vm.$watch 返回一個(gè)取消觀察函數(shù)，用來停止觸發(fā)回調(diào)：

var unwatch = vm.$watch('a', cb)
// 之后取消觀察
unwatch()

博主很認(rèn)真地看了看，當(dāng)時(shí)就懵逼了，沒看懂。還好網(wǎng)上大神多，查了查終于搞明白這個(gè)$watch方法的用法了。說白了$watch這貨就是觀察一個(gè)值的變化，觀察的這個(gè)值一變化的話，那么就執(zhí)行function里面的語句。廢話不多說，咱們直接看代碼：

HTML：

<div id="watch">
    firstName:<input type="text" name="li" v-model="firstName">
    <br>
    lastName:<input type="text" name="fei" v-model="lastName">
    <p>fullName: {{fullName}}</p>
</div>

JS：

var vm = new Vue({
      el: '#watch',
      data: {
        firstName: 'a',
        lastName: 'fei',
        fullName: 'a fei'
      },
      watch: {
        firstName: function (val) {
          this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
          this.fullName = this.firstName + ' ' + val
        }
      }
})

在代碼中，我們用wach方法監(jiān)聽了firstName和lastName這兩個(gè)變量，我們?cè)趇nput框框那里做了雙綁定，這樣子的話，我們?cè)趂irstName輸入框中輸入的值就會(huì)改變變量firstName的值，同理可得lastName，因?yàn)橹档母淖兒蛍atch這貨的觀察，所以watch里面的function代碼就會(huì)運(yùn)行，這樣子fullName也就會(huì)相應(yīng)地改變了。這樣子$watch這方法的用法也就一下子明了了。上述的例子中$watch就和原生js里面的on-change差不多了。

以上就是博主對(duì)$watch方法的理解了，希望可以幫助大家理解這一方法，要是上述有何不對(duì)的地方，麻煩各位看官多多指出，謝謝大家。

相關(guān)文章

最新評(píng)論