vue3 初识

setup()

使用 setup 函数时，它将接收两个参数：

1. props 无法解构2. context

ref，toRefs/toRef

toRefs()函数可以将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性节点，都是ref()类型的响应式数据

toRefs

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
Type of stateAsRefs:

{
  foo: Ref<number>,
  bar: Ref<number>
}

*/

// ref 和 原始property “链接”
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

reactive

返回对象的响应式副本

reactive支持一个对象或数组，并会把两者转化成一个proxy对象

watch

watch第一个参数为侦听数据源，它可以直接是一个(ref,reactive)对象,可以是具有返回值的 getter 函数（单