Composition API

1. setup函数在实例被完全初始化之前就执行，所有setup里 this 没有意义

2. ref

   1. 通过Proxy对数据进行封装，当数据变化时，触发模板等内容的更新

   2. 处理基础类型的数据， 变成一个响应式的数据

3. reactive

4. 处理非基础类型的数据

5. toRefs

   1. 可以将reactive里面的基础熟悉转换为ref响应式的数据，意味着可以去解构拿到reactive里的属性

const obj = reactive(obj);
const { name, age } = toRefs(obj);
return { name, age };

5. toRef（不建议使用这玩意，还是先自己定义一个空的）

const data = reactive({ name: 'Yagami' });
const age = toRef(data, 'age'); // data里无'age'属性时候，会生成一个空的响应式age对象，否则没有响应是效果 undefined

6. setup函数里 context 参数的意义

   const { attrs, slots, emit } = context;
   

   1. attrs：None-Props 属性，没有用props接受的参数（父组件传递的），可以用attrs来访问到
   2. slots：跟之前的this.$slots一样
   3. emit：跟之前的this.$emit() 一样

7. computed

   1. Vue.createApp({
            template: '<div @click="age += 1">{{ age }} {{ ageAdd5 }}</div>',
            setup (prop, ctx) {
              const { ref, reactive, computed } = Vue;
              const age = ref(0);
              const ageAdd5 = computed(() => age.value + 5)
              return {
                age, ageAdd5
              }
            }
          }).mount('#root')
      

8. watch 和 watchEffect

   1. watch的用法与2.0差不多（可以多个监听）

   2. watchEffect 会自动检测内部代码，如果有变化的数据依赖，那么会自动更新自动执行。（自动感知代码？我尼玛这么骚的么）

   3. watchEffect 不能获取oldVal

9. 生命周期

   const { onBeforeMount, onMounted, onBeforeUpdate, onUpdated } = Vue; // beforeMount, mounted, beforeUpdate, updated
   
   onRenderTracked, onRenderTriggered // 这两个事件都带有一个DebuggerEvent，它使我们能够知道是什么导致了Vue实例中的重新渲染。
   

10. ref （寻找dom）

    setup () {
        const { ref } = Vue;
        const dom = ref(null); // dom.value 就是真实的dom元素节点 与 $refs.xxx 一样
        return { dom }
    }
    
    // template
    <div ref="dom">this is a div element</div>