Vue3中setup函数的作用与实现

• setup函数是vue3新增组件选项，其作用为
  • 配合组合式api,建立组合逻辑、创建响应式数据、创建通用函数，注册生命周期钩子的能力
  • setup函数只会在被挂载时执行
• setup返回值有两种
  • 函数

    •   若为函数，则作为组件的render函数使用
      

  • 对象
    • 若为对象，则将对象包含的数据暴漏给模板使用
• 在渲染组件的函数中从组件上取出setup，获取其执行的返回值，判断其是否为函数，并将其挂载到组件实例上
  • 若为函数，则赋值给instance.render
  • 若为对象，则将其变成响应式，并赋值给instance.setupState

export function setupComponent(instance){

    let { type,props,children}  = instance.vnode
    let {data,render,setup} = type
    //初始化属性
    initProps(instance,props);
    instance.proxy = new Proxy(instance,instanceProxy);
    if(data){
        if(!isFunction(data)){
            return console.warn('The data option must be a function.')
        }
        //给实例赋予data属性
        instance.data = reactive(data.call({}))
    }
    if(setup){
      //setup的第二个参数，包含emit,attrs，slots等
      const context = {}
      const setupResult = setup(instance.props,context)
      if(isFunction(setupResult)){
        instance.render = setupResult
      }else if(isObject(setupResult)){
        instance.setupState = proxyRefs(setupResult)
      }
    }
    if(!instance.render){
      if(render){
      instance.render = render

      }else {
        //模板编译
      }
    } 
}

• 同时，instance的数据代理上做出对setupState的监听

const instanceProxy = {
    get(target,key){
        const { data,props,setupState} = target
        if(data && hasOwn(data,key)){
            return data[key]
        }else if(setupState && hasOwn(setupState,key)){
          return setupState[key]
        }
        else if(props && hasOwn(props,key)){
            return props[key]
        }
        let getter = publicProperties[key]
        if(getter){
            return getter(target)
        }
    },
    set(target,key,value,receiver){
        // debugger
        const {data,props,setupState} = target
        if(data && hasOwn(data,key)){
            data[key] = value
        }else if( setupState && hasOwn(setupState,key)){
            setupState[key]  = value
        }
        else if(props && hasOwn(props,key)){
            console.warn('props not update');
            return false
        }
        return true
    }
}