Người theo dõi Vue.js

Trình theo dõi Vue cho phép bạn lắng nghe dữ liệu thành phần và chạy bất cứ khi nào một thuộc tính cụ thể thay đổi

Trình theo dõi là một tính năng đặc biệt của Vue.js cho phép bạn theo dõi một thuộc tính của trạng thái thành phần và chạy một chức năng khi giá trị thuộc tính đó thay đổi.

Đây là một ví dụ. Chúng tôi có một thành phần hiển thị tên và cho phép bạn thay đổi tên bằng cách nhấp vào nút:

<template>
  <p>My name is {{name}}</p>
  <button @click="changeName()">Change my name!</button>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
},
methods: {
changeName: function() {
this.name = ‘Flavius’
}
}
}
</script>

Khi tên thay đổi, chúng tôi muốn làm điều gì đó, chẳng hạn như in nhật ký bảng điều khiển.

Chúng tôi có thể làm như vậy bằng cách thêm vàowatchđối tượng một thuộc tính có tên là thuộc tính dữ liệu mà chúng tôi muốn theo dõi:

<script>
export default {
  data() {
    return {
      name: 'Flavio'
    }
  },
  methods: {
    changeName: function() {
      this.name = 'Flavius'
    }
  },
  watch: {
    name: function() {
      console.log(this.name)
    }
  }
}
</script>

Chức năng được giao chowatch.namecó thể tùy chọn chấp nhận 2 tham số. Đầu tiên là giá trị tài sản mới. Thứ hai là giá trị tài sản cũ:

<script>
export default {
  /* ... */
  watch: {
    name: function(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

Người theo dõi không thể được tra cứu từ một mẫu như bạn có thể làm với các thuộc tính được tính toán.

Tải xuống miễn phí của tôiSổ tay Vue

Người theo dõi Vue.js

Trình theo dõi Vue cho phép bạn lắng nghe dữ liệu thành phần và chạy bất cứ khi nào một thuộc tính cụ thể thay đổi

Các hướng dẫn vue khác: