Vue的$watch方法怎么使用

這篇文章主要介紹了Vue的$watch方法怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue的$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()

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

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

關于“Vue的$watch方法怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue的$watch方法怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。