Phần này chúng ta sẽ tìm hiểu về 2 thuật ngữ nữa ở trong vue.js, vì nó là thuật ngữ nên mình sẽ giữ nguyên nó ở dạng tiếng anh mà không dịch sang tiếng việt bởi dịch sẽ rất khó trình bày cho các bạn hiểu :D.

1, Computed property.

Computed property trong Vue.js được thể hiện dưới dạng một phương thức hoặc một object chứa các phương thức setter và getter, nhưng khi bạn gọi một computed property thì bạn sẽ gọi nó như một thuộc tính bình thường. Và khi đó các hành động trong computed property sẽ được thực thi.

-Chắc hẳn khi bạn đọc xong dòng trên thì bạn cũng cũng thắc mắc vậy tại sao không dùng luôn property đi bày đặt dùng computed property làm gì? Điều thắc mắc trên của bạn sẽ đúng khi bạn thực thi các biểu thức đơn giản trong property, nhưng bạn sẽ thấy nó trở lên rối và rất khó bảo trì khi bạn đưa các biểu thức phức tạp vào trong template.

VD:

<div id="app">
    <h1 class="text-red">{{ name.split('').reverse().join('') }}</h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            name: 'Vu Thanh Tai'
        }
    });
</script>

-Như ví dụ trên, chắc bạn cũng đã nhìn thấy tống mớ code đảo ngược văn bản vào trong template nhìn nó rất rối. Và chẳng hạn như mình muốn sử dụng lại đoạn code trên ở một vài thời điểm khác nữa thì nó sẽ như thế nào đây? Lại viết lại chăng? Đó là lý do chúng ta lên sử dụng computed property (bài trước mình cũng đã có khuyên các bạn rồi :D).

Cú Pháp

-Để khai báo computed property trong Vue.js thì các bạn cần đặt nó ở trong scope object computed.

VD: Mình sẽ khai báo một computed chuyển đổi biến name trong data scope thành in hoa.

var app = new Vue({
    el: '#app',
    data: {
        name: 'Vu Thanh Tai'
    },
    computed : {
        convertToUpper: function (){
            return this.name.toUpperCase();
        }
    }
});

-Nếu như trong một vài trường hợp nào đó bạn muốn sử dụng computed property ở ngoài vue instance thì bạn chỉ cần truy xuất theo cú pháp nameObject.property.

VD: Mình sẽ log ra computed convertToUpper ở trên.

<div id="app">
    <p>F12 để thấy log</p>
    <h1 class="text-red">{{ convertToUpper }}</h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            name: 'Vu Thanh Tai'
        },
        computed : {
            convertToUpper: function (){
                return this.name.toUpperCase();
            }
        }
    });
    console.log(app.convertToUpper);
</script>

Computed vs Methods

-Chắc hẳn sau khi đọc hết phần trên các bạn cũng thắc mắc những thứ nêu ở trên thì method cũng có thể làm được? Điều đó hoàn toàn đúng, chúng ta có thể chuyển convertToUpper computed trên thành methods như sau:

<div id="app">
    <h1 class="text-red">{{ convertToUpper() }}</h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            name: 'Vu Thanh Tai'
        },
        methods : {
            convertToUpper: function (){
                return this.name.toUpperCase();
            }
        }
    });
</script>

-Nhưng computed sẽ khác với methods ở chỗ computed được lưu vào cache và computed sẽ chỉ được thay đổi khi dữ liệu bên trong nó thay đổi.

VD: Như với trường hợp computed convertToUpper ở trên thì khi mà biến name không thay đổi thì chương trình sẽ in ra luôn kết quả của lần trước đó mà không phải thực thi lại tiến trình bên trong nó.

Getter and Setter

-Ở mỗi computed property, mặc định thì nó sẽ chỉ chứa getter.

VD: Các viết computed convertToUpper ở trên tương đương với với cách sau:

var app = new Vue({
    el: '#app',
    data: {
        name: 'Vu Thanh Tai'
    },
    computed : {
        convertToUpper: {
            get : function () {
                return this.name.toUpperCase();
            }
        }
    }
});

- Nhưng bạn cũng có thể thêm setter cho các computed bằng cách tạo thêm một set function bên trong computer.

VD:

var app = new Vue({
    el: '#app',
    data: {
        name: 'Vu Thanh Tai'
    },
    computed : {
        convertToUpper: {
            get : function () {
                return this.name.toUpperCase();
            },
            set: function (name) {
                this.name = name;
            }
        }
    }
});

Để xem cách hoạt động thì các bạn chỉ cần gán giá trị cho computer là biết.

VD: Thực hiện set lại giá trị cho computed ở trên.

var app = new Vue({
    el: '#app',
    data: {
        name: 'Vu Thanh Tai' //giá trị ban đầu.
    },
    computed : {
        convertToUpper: {
            get : function () {
                return this.name.toUpperCase();
            },
            set: function (name) {
                this.name = name;
            }
        }
    }
});
//thiết lập lại giá trị
app.convertToUpper = "Hoc Lap Trinh Online Toidicode.com";

Khi chạy đoạn code trên thì kết quả trả về sẽ là:

HOC LAP TRINH ONLINE TOIDICODE.COM

2, Watcher.

- Watcher trong Vue.js đúng như nghĩa của nó  có nghĩa là theo dõi, nó có nhiệm vụ theo dõi sự thay đổi của dữ liệu và thực thi hành động kèm theo.

Cú pháp: Để khai báo watcher trong vue.js thì các bạn cần phải tuân thủ các nguyên tắc sau:

• tên của watcher phải trùng với tên của data cần theo dõi.
• Và các watcher phải được đặt trong watch scope.

VD: Khai báo watcher name có nhiệm vụ alert ra nội dung của biến name mỗi khi nó thay đổi.

var app = new Vue({
    el: '#app',
    data: {
        name: 'Vu Thanh Tai' //giá trị ban đầu.
    },
    watch: {
        name : function () {
            alert(this.name);
        }
    }
});
//thiết lập lại giá trị
app.name = "Hoc Lap Trinh Online Toidicode.com";

-Sau khi các bạn chạy đoạn code trên thì ngay lập tức sẽ nhận được một alert với nội dung: "Hoc Lap Trinh Online Toidicode.com" lý do là chúng ta đã thay đổi giá trị của bên name lúc đầu, nên lúc này watcher sẽ thực hiện nhiệm vụ là alert ra giá trị mới.

3, Computed vs Watcher.

Nhìn chung thì cả computed và watcher đều được thực hiện khi chúng ta thay đổi data bên trong nó. Và cả hai đều có thể áp dụng để thực thi một hành động nào đó khi có 1 biến phụ thuộc thay đổi. Đối với trường hợp này chúng ta hay cùng xem cách xử lý của watcher và computed xem cái nay hay hơn nhé!.

Watcher

var app = new Vue({
    el: '#app',
    data: {
        firstName: 'Vu Thanh',
        lastName: 'Tai',
        fullName: 'Vu Thanh Tai',
    },
    watch: {
        firstName : function (val) {
           this.fullName = val + ' ' + this.lastName;
       },
       lastName : function (val) {
           this.fullName = this.firstName + ' ' + val;
       }
   }
});

Computed

var app = new Vue({
    el: '#app',
    data: {
        firstName: 'Vu Thanh',
        lastName: 'Tai',
    },
    computed: {
        fullName : function () {
            return this.firstName + ' ' + this.lastName;
        }
    }
});

-Nhìn vào hai cách trên thì computed có vẻ ngắn gọn và đơn giản hơn đúng không. Nhưng tùy vào từng trường hợp sẽ có các cách giải quyết khác nhau nên ở đây mình không dám đưa ra khẳng định cái nào tốt hơn cái nào.

4, Lời kết.

-Như vậy kết thúc phần này chúng ta đã tìm hiểu được thêm 2 thuật ngữ trong vue.js đó là computed và watcher rồi. Các bạn nên lắm chắc phần này vì sau này chúng ta sẽ sử dụng khá là nhiều đến nó.