vue3源码分析——实现props,emit，事件处理等

引言

本期来实现，setup里面使用props,父子组件通信props和emit等，所有的源码请查看

本期的内容与上一期的代码具有联动性，所以需要明白本期的内容，最后是先看下上期的内容哦！😃😃😃

实现render中的this

在render函数中，可以通过this,来访问setup返回的内容，还可以访问this.$el等

测试用例

由于是测试dom,jest需要提前注入下面的内容，让document里面有app节点，下面测试用例类似在html中定义一个app节点哦

 let appElement: Element;beforeEach(() => {appElement = document.createElement('div');appElement.id = 'app';document.body.appendChild(appElement);});afterEach(() => {document.body.innerHTML = '';}) 

本功能的测试用例正式开始

test('实现代理对象，通过this来访问', () => { let that;const app = createApp({render() {// 在这里可以通过this来访问that = this;return h('div', { class: 'container' }, this.name);},setup() {return {name: '123'}}});const appDoc = document.querySelector('#app')app.mount(appDoc);// 绑定值后的htmlexpect(document.body.innerHTML).toBe('<div id="app"><div class="container">123</div></div>'); const elDom = document.querySelector('#container')// el就是当前组件的真实domexpect(that.$el).toBe(elDom);}) 

分析

上面的测试用例

1.setup返回是对象的时候，绑定到render的this上面
2.$el则是获取的是当前组件的真实dom

解决这两个需求:

1.需要在render调用的时候，改变当前函数的this指向,但是需要思考的一个问题是：this是啥，它既要存在setup,也要存在el，咋们是不是可以用一个proxy来绑定呢？在哪里创建呢 可以在处理组件状态setupStatefulComponent来完成改操作
2.el则是在mountElement中挂载真实dom的时候，把当前的真实dom绑定在vnode当中

编码

针对上面的分析，需要在setupStatefulComponent中来创建proxy并且绑定到ins