Skip to content

Tag: computed

VueCore – Composition API : computed, watch & watchEffect

<template>
  <h1>{{ finalContent }}</h1>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const content = ref("Trung Thinh");

    const finalContent = "Tên tôi là : " + content.value;
    // change content 
    content.value = "Not Trung Thinh"
    return {
      finalContent
    }
  }
}
</script>

Ở trên tôi đã thay đổi content.value = ‘Not Trung Thinh’

Tại sao kết quả lại như thế này ?

Vì data phụ thuộc vào reactive state muốn có thuộc tính reactive luôn (luôn update nếu state thay đổi) thì phải sử dụng computed, watch hoặc watchEffect

VueCore – Cách sử dụng methods, computed & watch

Cả 3 methods, computed, watch đều cung cấp cho ta 1 chức năng chung đó là : theo dõi những thay đổi trong data() đồng thời update và xử lý những giá trị đã thay đổi đó. Nhưng nếu không nắm rõ behind the scene 3 phương thực này hoạt động như thế nào sẽ khiến slow-performance đấy !!!