Vue3.md

watchEffect

Tương tự như watch, nhưng có một số điểm khác biệt:

• Chỉ nhận duy nhất 1 function (watch có thể chấp nhận một hoặc nhiều thuộc tính phụ thuộc, mỗi thuộc tính một function)
• Chạy lúc depend được khai báo và khi có thay đổi (watch chỉ chạy lúc depend thay đổi) => Quan sát nhiều properties reactive một lúc, và ko quan tâm đến giá trị
• watchEffect chạy lần đầu sau trước khi DOM được mount nên nếu muốn access vào DOM hoặc ref thì cần để watchEffect vào trong onMounted

onMounted(() => {
  watchEffect(() => {
    // access the DOM or template refs
  })
})

Ref and Reactive

Sử dụng ref() khi muốn khai báo data ở dạng nguyên thủy. Reactive ở dạng Object. Sử dụng toRefs() để convert một reactive object thành các tham chiếu ứng với mỗi thuộc tính của object để đảm bảo reactive

const pos = reactive({
    x: 0,
    y: 0
  })

  // ...
return toRefs(pos)

Life cycle

beforeCreate -> use setup()

created -> use setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

activated -> onActivated

deactivated -> onDeactivated

errorCaptured -> onErrorCaptured

2 hooks mới: onRenderTracked, onRenderTriggered