Chào mọi người, chẳng là thế này tớ có một người bạn đang học về Vuejs thì đến phần data properties and methods và computed properties and Watchers thì ông bạn đấy hỏi tớ sao có nhiều property thế, sao không cho chúng thành một để dễ dàng làm việc đi. Nhân đây tớ cũng muốn chia sẻ một chút hiểu biết của tớ qua bài viết này.

Cùng tìm hiểu nhé :v.

Nội dung.

Methods.

Khái niệm và sử dụng

Methods trong vuejs được hiểu là danh sách các phương thức của component, ở đây có thể viết các phương thức cho một thực thi ở một nơi nào đó trong component.

một phương thức có thể trả về một giá trị hoặc cũng có thể không, phương thức có thể nhận tham số đầu vào và xử lý, phương thức sẽ được gọi mỗi khi component được render.

Ở methods này chúng ta nên tránh sử dụng arrow function khi định nghĩa một phương thức, bởi vì arrow function có liên quan tới con trỏ this, trong bối cảnh này thì con trỏ this không phải Vue instance như chúng ta mong đợi,

Ví dụ:

<template> <div> <span>{{ sayHello() }}</span> <button @click="sendHello">Click me</button> </div>
</template> <script>
export default { data () { return { message: 'xin chao' } }, methods: { sayHello() { return this.message; }, sendHello() { alert(this.message); }, sendHello2: () => { console.log(this); } }
}
</script> <style scoped> </style>

Ở đây các bạn có thể thấy tớ có để 2 phương thức trả về và không trả về, chắc các cậu cũng đoán được nó sẽ hiển thị gì và khi click button nó sẽ thông báo gì rồi đúng không ?. cậu có thể thay methods để xem arrow function nó trả về gì nhé :v.

Debouncing and Throttling

Để tiếp tục phần này chúng ta cần hiểu rõ hai khái niệm Debouncing và Throttling tại Link

Có thể hiệu là phương thức dùng để điều khiện được gọi bao nhiêu lần, trong khoảng thời gian xác định

Vuejs không bao gồm và hỗ trợ cho debouncing and throttling nhưng chúng ta có thể sử dụng thông qua thư viện lodash. để cài đặt chúng ta chỉ cần chạy câu lệnh: npm install lodash --save

<template> <div> <button @click="click">debounce</button> <button @click="click2">throttle</button> </div>
</template> <script>
import lodash from 'lodash'
export default { data () { return { message: 'xin chao' } }, methods: { click: lodash.debounce(function () { console.log(123); }, 1000), click2: lodash.throttle(function () { console.log(1356); }, 1000), }
}
</script> <style scoped> </style>

Computed Properties.

Khái niệm và sử dụng

Computed có thể hiểu là nơi chứa các phước thức trả về một thuộc tính đã được tính toán, tức là thuộc tính này sẽ sinh ra sau khi qua một function xử lý. thông thường những phép tính đơn giản chúng ta có thể hiển thị trực tiếp qua template với cú pháp {{}} nhưng đối với phép tính toán phức tạp thì sẽ trở lên cồng kềnh rất khó khăn cho việc phát triển và sửa chữa.

Cách sử dụng

<template> <div> <span>{{ getMessage}}</span> </div>
</template> <script> export default { data () { return { message: 'xin chao' } }, computed: { getMessage() { return `${this.message} cac ban`; } }
}
</script>

• Xem qua cách khai báo và sử dụng thì ông bạn tớ cũng hỏi là hai cái methods và computed nó cũng kiểu la lá nhau mà, cũng return các thứ các thứ sao lại sử dụng chung nhỉ ?.

Xin thưa là computed các giá trị tính toán đã lại đã được lưu vào bộ nhớ đệm, nếu chỉ render và không ảnh hưởng đến chúng thì chúng sẽ lấy luôn trong bộ nhớ cache và không cần tính toán lại. Còn với methods chúng luôn tính toán lại mỗi khi render.

• Lúc này ông bạn lại hỏi lưu cache để làm gì tại sao phải làm vậy?

Tại sao phải vậy á ? Đoán xem )) đấy là ai đó trả lời chứ riêng tớ thì khác :3 giả sử chúng ta có một danh sách vô cùng lớn mà mỗi dữ liệu lại tính toán ước chừng tầm 10s, sau đó có một component khác cũng cần tính toán y hệt vậy, nếu không có bộ nhớ đệm thì việc chúng ta lại lấy danh sách đó tính toán lại rồi trả về .... 10s, 20s, 30s .... 1h... vô cùng. Nhưng lưu vào cache thì lấy nó ra đúng là phút mốt.

Computed Setter

Computed properties mặc định chỉ có duy nhất getter. Nhưng chúng ta có thể cung cấp một setter khi bạn cần:

<template> <div> <span>{{ getMessage}}</span> <br> <span>{{ fullName }}</span> <button @click="setComputed">Click</button> </div>
</template> <script> export default { data () { return { message: 'xin chao', fistName: 'le', lastName: 'khoan' } }, computed: { getMessage() { return `${this.message} ca ban`; }, fullName: { //get get() { return this.fistName + ' ' + this.lastName; }, //set set(newValue) { const names = newValue.split(' '); this.fistName = names[0]; this.lastName = names[1]; } } }, methods : { setComputed() { this.fullName = 'anh anh'; } }
}
</script>

Khi click button thì value đã được cập nhật tương ứng và kết quả trả về anh anh.

Watch

Khái niệm và cách sử dụng

Vue Cung cấp một cách chung chung để quan sát và phản ứng mỗi dữ liệu thay đổi trên phiên bản hoạt động hiện tại. Liên tưởng tới hiện tại thì nó chính là cái thằng mách bố mẹ bạn khi bạn đi chơi điện tử trộm ý.

<template> <div> <span>{{ getMessage}}</span> <button @click="changeMessage">Click</button> </div>
</template> <script> export default { data () { return { message: 'xin chao', } }, watch: { message(newMessage, oldMessage) { console.log(newMessage, oldMessage); } }, methods: { changeMessage() { this.message = 'hello'; } }
}
</script> 

Tham số đầu vào có thể là một tham số đó là giá trị mới nhất của thuộc tính đang được giám sát, Ngoài ra có thể thêm tham số thứ hai đó là giá trị trước khi thay đổi thuộc tính.

Kết Luận

Qua bài viết này tớ cũng đã chia sẻ hết những gì mà tớ biết và ông bạn mình cũng lơ lớ hiểu rồi chắc chỉ cho ông bạn ý nghịch ngợm thêm để hiểu hết. Tớ cũng mạn phép tổng kết sau quá trình tìm hiểu ở đây nhé.

Cảm ơn mọi người đã theo dõi nhé !! Chúc mọi người có một ngày tốt lành.