Vue 响应式核心

ref（）

// 返回一个 ref 对象 , 此对象只能通过 value 赋值 。
const count = ref(1)
count.value++

computed（）

// 创建一个只读的计算属性
const count = ref(1)
const plusOne = computed(() => count.value + 1)

// 创建一个可写的计算属性
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

reactive（）

// 返回一个对象的响应式代理
const obj = reactive({ count: 0 })
obj.count++

readonly（）

// 返回一个只读代理
const original = reactive({ count: 0 })
const copy = readonly(original)

watchEffect（）

// 立即执行函数，同时在数据源更改时重新执行。
const count = ref(0)
watchEffect(() => console.log(count.value))    // -> log：0
count.value++    // -> log：1

watch（）

// 侦听一个或多个响应式数据源，并在数据源变化时调用所给的函数。
const count = ref(0)
watch(count, () => console.log(count.value))
count.value++    // -> log：1