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,
  bar: Ref
}

*/

// 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 函数（单一源），可以是一个数组。

当使用watch绑定一个reacive对象时候，在回调函数里无法获取旧对象,即使设置deep:true。

        const state = reactive({
            editStates: {
                name: false,
                studentId: false,
                type: false
            }
        });
      //侦听对象 ref或者reactive对象
        watch(state.editStates, (newState,preState) => {
            console.log(newState === preState)
            //两者都为最新数据
        });
      //侦听单一源 当为基础类型时才能使用函数返回值形式
        watch(() => state.editStates.name), (newState,preState) => {
            console.log(newState === preState)
            //两者都为最新数据
        }); 

watch可以绑定多个源数据

const number = reactive({a:1,b:2});
watch([() => number.a,()=> number.b],([newa,newb],[prea,preb]) => {
  console.log('改变')
})