Người theo dõi Vue
Trình theo dõi là một phương thức theo dõi thuộc tính dữ liệu có cùng tên.
Trình theo dõi chạy mỗi khi giá trị thuộc tính dữ liệu thay đổi.
Sử dụng trình theo dõi nếu một giá trị thuộc tính dữ liệu nhất định yêu cầu một hành động.
Khái niệm người theo dõi
Watchers là tùy chọn cấu hình thứ tư trong phiên bản Vue mà chúng ta sẽ tìm hiểu. Ba tùy chọn cấu hình đầu tiên mà chúng ta đã xem xét là 'dữ liệu', 'phương thức' và 'được tính toán'.
Giống như những người theo dõi 'dữ liệu', 'phương thức' và 'được tính toán' cũng có một tên dành riêng trong phiên bản Vue: ' watch '.
Cú pháp
const app = Vue.createApp({
data() {
...
},
watch : {
...
},
computed: {
...
},
methods: {
...
}
})
Như đã đề cập ở vùng màu xanh lá cây ở trên cùng, người theo dõi sẽ giám sát thuộc tính dữ liệu có cùng tên.
Chúng tôi không bao giờ gọi một phương thức theo dõi. Nó chỉ được gọi tự động khi giá trị thuộc tính thay đổi.
Giá trị thuộc tính mới luôn có sẵn làm đối số đầu vào cho phương thức theo dõi và giá trị cũ cũng vậy.
Ví dụ
Phần tử <input type="range"> được sử dụng để thay đổi giá trị 'rangeVal'. Trình theo dõi được sử dụng để ngăn người dùng chọn các giá trị trong khoảng từ 20 đến 60 được coi là bất hợp pháp.
<input type="range" v-model="rangeVal">
<p>{{ rangeVal }}</p>
const app = Vue.createApp({
data() {
rangeVal: 70
},
watch: {
rangeVal(val){
if( val>20 && val<60) {
if(val<40){
this.rangeVal = 20;
}
else {
this.rangeVal = 60;
}
}
}
}
})
Hãy tự mình thử »Người theo dõi với các giá trị mới và cũ
Ngoài giá trị thuộc tính mới, giá trị thuộc tính trước đó cũng tự động có sẵn làm đối số đầu vào cho các phương thức của trình theo dõi.
Ví dụ
Chúng tôi thiết lập sự kiện nhấp chuột trên phần tử <div> để ghi lại vị trí x của con trỏ chuột 'xPos' bằng phương thức 'updatePos'. Trình theo dõi tính toán sự khác biệt về pixel giữa vị trí x mới và vị trí trước đó bằng cách sử dụng các đối số đầu vào cũ và mới cho phương thức của trình theo dõi.
<div v-on:click="updatePos"></div>
<p>{{ xDiff }}</p>
const app = Vue.createApp({
data() {
xPos: 0,
xDiff: 0
},
watch: {
xPos( newVal,oldVal ){
this.xDiff = newVal-oldVal
}
},
methods: {
updatePos(evt) {
this.xPos = evt.offsetX
}
}
})
Hãy tự mình thử »Chúng ta cũng có thể sử dụng các giá trị mới và cũ để đưa ra phản hồi cho người dùng vào đúng thời điểm đầu vào chuyển từ không hợp lệ sang hợp lệ:
Ví dụ
Giá trị từ phần tử <input> được kết nối với người theo dõi. Nếu giá trị bao gồm '@' thì giá trị đó được coi là địa chỉ email hợp lệ. Người dùng nhận được văn bản phản hồi để thông báo xem đầu vào có hợp lệ, không hợp lệ hay nó chỉ hợp lệ với lần nhấn phím cuối cùng.
<input v-type="email" v-model="inpAddress">
<p v-bind:class="myClass">{{ feedbackText }}</p>
const app = Vue.createApp({
data() {
inpAddress: '',
feedbackText: '',
myClass: 'invalid'
},
watch: {
inpAddress(newVal,oldVal) {
if( !newVal.includes('@') ) {
this.feedbackText = 'The e-mail address is NOT valid';
this.myClass = 'invalid';
}
else if( !oldVal.includes('@') && newVal.includes('@') ) {
this.feedbackText = 'Perfect! You fixed it!';
this.myClass = 'valid';
}
else {
this.feedbackText = 'The e-mail address is valid :)';
}
}
}
})
Hãy tự mình thử »Người theo dõi so với phương pháp
Trình theo dõi và phương thức đều được viết dưới dạng hàm, nhưng có nhiều điểm khác biệt:
- Các phương thức được gọi từ HTML.
- Các phương thức thường được gọi khi một sự kiện xảy ra.
- Các phương thức tự động nhận đối tượng sự kiện làm đầu vào.
- Chúng ta cũng có thể gửi các giá trị khác mà chúng ta chọn làm đầu vào cho một phương thức .
- Người theo dõi chỉ được gọi khi giá trị thuộc tính dữ liệu đã xem thay đổi và điều này xảy ra tự động.
- Người theo dõi tự động nhận giá trị mới và cũ từ thuộc tính được theo dõi.
- Chúng tôi không thể chọn gửi bất kỳ giá trị nào khác với người theo dõi làm đầu vào.
Người theo dõi so với Thuộc tính được tính toán
Trình theo dõi và thuộc tính được tính toán đều được viết dưới dạng hàm.
Trình theo dõi và thuộc tính được tính toán đều được gọi tự động khi phần phụ thuộc thay đổi và không bao giờ được gọi từ HTML.
Dưới đây là một số khác biệt giữa thuộc tính được tính toán và trình theo dõi:
- Người theo dõi chỉ phụ thuộc vào một thuộc tính, thuộc tính mà họ được thiết lập để xem.
- Các thuộc tính được tính toán có thể phụ thuộc vào nhiều thuộc tính.
- Thuộc tính được tính toán được sử dụng giống như thuộc tính dữ liệu, ngoại trừ chúng là thuộc tính động.
- Người theo dõi không được tham chiếu từ HTML.
