1. Hãy dành vài giây Đăng nhập hoặc Đăng ký tài khoản để truy cập và sử dụng TBit hiệu quả nhất.
    Ẩn thông báo
  2. Bạn hãy like trang Facebook của TBit để nhận được tin tức công nghệ nhanh nhất từ chúng tôi.
    Ẩn thông báo

VueJS Bài 7: Tìm hiểu Vue Watcher

Thảo luận trong 'JavaScript' bắt đầu bởi Phạm Đạt, 11/7/18.

0/5, 0 phiếu

    1. Phạm Đạt TBit-Mod

      Trong bài này chúng ta sẽ tìm hiểu về Vue Watcher, đây là cách để bạn can thiệp vào những thay đổi của dữ liệu trong VueJS. Ví dụ khi bạn xây dựng ứng dụng quản lý sinh viên và tại chứ năng sửa sinh viên bạn muốn mỗi khi tên của sinh viên bị thay đổi thì sẽ thực hiện gọi ngầm một tác vụ hiển thị log cho admin thì watcher rất cần thiết.

      [​IMG]

      1. Vue Watcher là gì?
      Dịch từ tiếng Anh sang tiếng Việt thôi cũng đủ để nói lên ý nghĩa của phần này, watcher có nghĩa là người trông coi những thay đổi của dữ liệu trong VueJS. Watcher sẽ nhận biết được khi nào thì dữ liệu được thay đổi và nếu cần thiết thì sẽ can thiệp vào quá trình thay đổi đó.
      Về cú pháp thì mỗi data sẽ khai báo một watcher như sau:

      HTML:
      1. var vm = new Vue({
      2.     el: '#example',
      3.     data: {
      4.         message : "Học VueJS  Watchers tại tbit.vn"
      5.     },
      6.     watch : {
      7.         message : function(newValue){
      8.             console.log("Giá trị của message được thay đổi");
      9.         }
      10.     }
      11. });
      12.  
      13. // Thay đổi giá trị của message
      14. // nêu bạn bật console.log lên thì sẽ thấy một dòng thông báo là:
      15. // Giá trị của message được thay đổi
      16. vm.message = "Phạm Đạt";
      2. Watcher và Computed Properties
      Xét về tính năng thì mỗi component sẽ có những nhiệm vụ khác nhau, tuy nhiên việc sử dụng như thế nào thì phụ thuộc vào sở thích và kinh nghiệm của lập trình viên. Xét ví dụ dưới đây tại trang chủ của Vue.

      HTML:
      1. var vm = new Vue({
      2.     el: '#demo',
      3.     data: {
      4.         firstName: 'Foo',
      5.         lastName: 'Bar',
      6.         fullName: 'Foo Bar'
      7.     },
      8.     watch: {
      9.         firstName: function (val) {
      10.             this.fullName = val + ' ' + this.lastName;
      11.         },
      12.         lastName: function (val) {
      13.             this.fullName = this.firstName + ' ' + val;
      14.         }
      15.     }
      16. });
      Với cách viết này thì mỗi khi có sự thay đổi giá trị của firstName hoặc lastName thì fullName cũng được thay đổi theo, tuy nhiên code hơi rườm rà bởi mục đích của ta là lấy fullName nên có thể sử dụng Computed để thay thế.

      HTML:
      1. var vm = new Vue({
      2.     el: '#demo',
      3.     data: {
      4.         firstName: 'Foo',
      5.         lastName: 'Bar'
      6.     },
      7.     computed: {
      8.         fullName: function () {
      9.             return this.firstName + ' ' + this.lastName;
      10.         }
      11.     }
      12. });

      Như vậy mỗi khi muốn lấy fullName thì chỉ cần gọi vm.fullName là được.

      3. Lời kết
      Như vậy watch là cơ chế trông đợi và có thể bổ sung những chức năng vào mỗi khi dữ liệu có thay đổi. Nếu mang so sánh giữa computed và watcher thì ta thấy mỗi component có nhũng nhiệm vụ khác nhau hoàn toàn nên việc sử dụng cái nào sẽ phụ thuộc vào sở thích và kinh nghiệm của lập trình viên.

      * Tài liệu tham khảo:
      https://vuejs.org/
      https://www.google.com.vn/
       
      Đang tải...

Chia sẻ trang này

Đang tải...