深入了解Vue3中props的原理与使用

{
  render() {
    return h() // render函数返回一个虚拟节点
  }
  setup() {}
}

import { h } from '../h.js';
import { Foo } from './foo.js';
export const App = {
    // render 页面元素内容即template
    render() {
        // 接收一个Foo，并通过h函数创建一个子组件node2
        let node2 = h(
            Foo,
            { 
              count: 1 
            },
            {}
        )
        return h(
            'div',
            {
                id: 'root',
            },
            [
                node2 // App接收Foo组件作为其子组件
            ] 
        );
    },
    setup() {
    }
};

import { h } from '../h.js';
// 定义一个Foo组件用于验证Props功能
export const Foo = {
    // render 页面元素内容即template
    render() {
        // ui 页面内容
        const foo = h(
            'div',
            {},
            'Foo' + this.count
        );
        return h('div', {}, [foo]);
    },
    // 第一个参数props，用于父子组件传值
    setup(props) { 
        console.log(props.count); // 打印传入的props值
    }
};

let node2 = h(
    Foo,
    { 
      count: 1 
    },
    {}
)

export function createComponentInstance(vnode) {
    const component = {
        vnode,
        type: vnode.type,
        // 先创建一个空的setupState，去暂存组件类型虚拟节点的setup返回值
        setupState: {},
      	// 创建一个props，用来存储组件虚拟节点接收的props，注意：props不允许改变 （props）
        props: {}, 
    }
    return component
}

// 将传入的props挂载到组件实例对象上
export function initProps(instance, props) {
    instance.props = props
}

instance.proxy = new Proxy({ _: instance }, PublicInstanceProxyHandlers);
const PublicInstanceProxyHandlers = {
    get({ _: instance }, key) {
        const { setupState, props } = instance
        // 如果在传入的props中，则返回的对应的值 （props）
        if (hasOwn(props, key)) {
            return props[key]
        }
    }
}

const {setup} = instance.type.setup // 获取setup函数
// 在执行setup的时候将props传入即可
setup(shallowReadonly(instance.props))

// 第一个参数props，用于父子组件传值
setup(props) { 
    console.log(props.count); // 打印传入的props值
}

instance.render.call(instance.proxy)