Vue 3.0

Setup 组合API入口函数

• 在beforeCreate（数据初始化）前执行，组件还没有创建 不能使用this
• ref 定义一个响应式数据（基本数据类型） 返回 ref 对象 修改数据

setup () {
    // 定义响应式数据 ref对象
    const count = ref(1)
    // 更新响应式数据的函数
    function update () {
      // alert('update')
      count.value = count.value + 1
    }
    return { count,update, }
 }

• reactive 定义多个响应式数据（复杂数据类型）
• 接收一个普通对象，返回该普通对象的响应式代理对象
• 返回 proxy 的代理对象，被代理者为reactive中的传入对象

setup () {
    /* 定义响应式数据对象*/
    const state = reactive({
      name: 'tom',
      age: 25,
      wife: {
        name: 'marry',
        age: 22
      },
    })

    const update = () => {
      state.name += '--'
      state.age += 1
      state.wife.name += '++'
      state.wife.age += 2
    }

    return { state,update, }
 }

响应式

通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等…
通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

Proxy

• Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）
• 即通过proxy 代理对象实现把普通对象转换为响应对象的操作
• const p = new Proxy(target, handler)
• target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
• handler（处理器） 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

	const handler = {
    	get: function(obj, prop) {
        return prop in obj ? obj[prop] : 37;
   	 }
	};

	const p = new Proxy({}, handler);
	p.a = 1;
	p.b = undefined;

	console.log(p.a, p.b);      // 1, undefined
	console.log('c' in p, p.c); // false, 37

// defineComponent函数，定义一个组件，内部传入配置对象
import { defineComponent } from 'vue'
export default defineComponent {}