Vue.js中$watch方法的作用是什么

Vue.js中$watch方法的作用是什么，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

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

vm.$watch 返回一個取消觀察函數，用來停止觸發回調：

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

博主很認真地看了看，當時就懵逼了，沒看懂。還好網上大神多，查了查終于搞明白這個$watch方法的用法了。說白了$watch這貨就是觀察一個值的變化，觀察的這個值一變化的話，那么就執行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
        }
      }
})

看完上述內容，你們掌握Vue.js中$watch方法的作用是什么的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！