Vue3中props的原理与使用

简介: Vue3中props的原理与使用

前言

props指父组件往子组件中传入参数,我们来介绍下如何理解vue3的props的原理

介绍

了解其原理之前我们要清楚vue的虚拟节点是什么,有什么表现。

  • 虚拟节点主要分成两种,分别是组件类型及元素类型,当然还有文本类型等特殊的虚拟节点。
  • 虚拟节点都会接收三个基本参数,分别是type, props, children


对于组件类型而言:

type是一个对象里面包括基本的render函数及setup函数等

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

props是父组件往子组件传入的参数

children是父组件往子组件传入的插槽

对于元素类型而言:

  • type是当前节点的元素类型,如div
  • props是当前节点的元素属性,如class
  • children是当前节点的子元素是个数组,数组的内容有可能是组件也有可能是元素

原理

前提

基于此我们可以创建两个组件互为父子的组件分别是APP组件(父),FOO组件(子)

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值
    }
};

通过上面的代码我们可以看到,这里创建了两个文件分别代表父组件和子组件。


vue3的编译过程中我们会先去解析组件,就将组件传入patch函数中,判断当前的虚拟节点类型是组件还是元素,再走下面的编译。


上面的父组件代码中我可以看到对于Foo,我们创建了一个组件叫node2,并在props的位置中传入了一个count: 1的props。


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

因为vue会递归的去解析每一个虚拟节点所以这个node2最后也会被解析。!!!


下面介绍解析这个node2的时候做了什么,如何实现props的功能的

创建组件实例对象

如果是组件类型的话,将我们组件的虚拟节点作为参数传入createComponentInstance, 去创建一个组件实例对象,如下:


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

因为我们创建vnode的时候,实际上会接收接收三个基本参数,分别是type, props, children

所以这里传入的vnode会带有props字段,而这个props字段是count:1(细品)

假设我们在这一步创建了一个组件实例对象,叫instance

初始化Props操作

因为instance就接收了vnode,而组件的vnode实际上包含了props

所以接着就会执行一个initProps的操作,如果vnode中props存在,那么就将props挂载到instance下的props字段中

这时候组件实例对象就可以正常的拿到props的值了

创建proxy对象去获取Props

因为我们知道代码中我们可以通过this. 的方式去获取props的值,而且props已经被挂载到了组件实例对象中。

因此创建一个proxy对象(后续通过bind的方式将这个对象挂载到render函数等位置,this.的时候由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]
        }
    }
}


props作为参数传入setup

因为我们知道vue3中在setup中没有this,但可以接收一个props,通过这个props去获取到父组件传入的值。

那我们已经将props的值挂载到组件实例对象上,所以我们可以将props作为参数传入到setup中。

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

因此我们在使用的时候就可以通过接收props在setup中读值。

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

将proxy挂载到render上

在解析一个虚拟节点的时候,其实会先执行setup函数,然后再执行render,因为我们可以通过this. 的方式去获取props的值。

所以我们通过bind的方式将我们之前创建proxy对象挂载到render函数中,保证其this可以正确取到props的值。

instance.render.call(instance.proxy)

总结

到这里props的原理就讲完了。


props实际上是 父组件往子组件的虚拟节点的props处插入的参数。


因此我们在创建子组件的组件实例对象的时候可以拿到这个props的值并将其挂载到子组件的组件实例对象中。


如果组件中需要使用props,通常是两个位置setup或render


对于setup,我们可以将组件实例对象的props作为参数传入,这样就可以使用了,但是注意props是一个不能改的值,所以我们要用readonly包裹起来。


在组件的页面中我们可以通过 this. 的方式去读取props的值,所以在渲染页面即调用render函数的时候,我们可以通过创一个proxy对象,将这个对象挂载到render函数中,通过proxy去读取到对应的props值


相关文章
|
4天前
|
JavaScript 前端开发 API
什么是响应式❓Vue2/Vue3中响应式的原理
什么是响应式❓Vue2/Vue3中响应式的原理
17 2
|
4天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
11 2
|
4天前
|
资源调度 JavaScript 前端开发
vite+vue3+ts从0到1搭建企业级项目(2)
vite+vue3+ts从0到1搭建企业级项目
17 1
|
4天前
|
开发工具 git
vite+vue3+ts从0到1搭建企业级项目(4)
vite+vue3+ts从0到1搭建企业级项目
23 0
|
4天前
|
存储 JavaScript API
vite+vue3+ts从0到1搭建企业级项目(3)
vite+vue3+ts从0到1搭建企业级项目
18 0
|
4天前
|
资源调度 JavaScript 测试技术
vite+vue3+ts从0到1搭建企业级项目(1)
vite+vue3+ts从0到1搭建企业级项目
36 0
|
4天前
|
JavaScript 前端开发 编译器
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
14 0
|
6天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
63 7
使用 Vue CLI 脚手架生成 Vue 项目
|
4天前
|
JavaScript
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3