vue3基础知识》学习笔记Day29-（Period2）组合式API：响应式 API：核心

setup可以返回一个h函数，此函数会将组件方法暴露给父组件，可以用expose()来解决

import { h, ref } from 'vue'

export default {
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value

    expose({
      increment
    })

    return () => h('div', count.value)
  }
}

如果父组件可以访问increment方法来访问模板

ref()

const count = ref(0)
console.log(count.value) // 0

computed()

常见的举例：创建一个只读的计算属性ref

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 因为是可读的，所以此会报错

reactive()

响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性。

const obj = reactive({ count: 0 })
obj.count++

watch()

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

深度监听

const state = reactive({ count: 0 })
watch(
  () => state,
  (newValue, oldValue) => {
    // newValue === oldValue
  },
  { deep: true }
)