Vue 3.0 地铁学习心得

77 阅读3分钟

h中的事件注册

按照源码的解析,需要先解析到on,然后判断首字母大写,可以判断这个是事件,然后去执行。

声明子组件,子组件被调用

子组件可以被多个父组件调用,先声明子组件的哪些事件会被调用,然后在子组件中去触发,为了复用,事件的执行过程中写在子组件中。

props 和 emit

对于这种框架提供的,已经预先注册了,在调用setup中直接使用就可以了。props是一个对象,emit写在{emit}中。如果在script中使用setup,那么就来自于defineProps和definedEmits中。

provide 和 inject

父组件注入的值,可以在子组件和孙组件中获取。采用原型链的方式,如果父组件没有,会继续往上查找,直到查找到顶层节点。provide 和inject使用函数,在setup中调用。会判断父节点中是否有provide,没有就 不执行,有的话执行,参数可填,可不填。在实现过程中的思想,先实现基础功能,再去扩展。比如扩展默认值,如果有就给他添加,没有就不添加,如果类型是函数的话,就执行获得返回值,如果实现没有进行执行,那就写一个自执行函数。 自己写的实现,在执行的过程中去引用。实现的过程是,provide 去set值,inject去get值。

customRender 的实现

可以在不同平台上渲染,customRender抽象出实际步骤,具体的实现由用户自己传入。用户可以传入值和传入函数。

defHttp

直接获取后端返回的值,对于后端返回的值,AXIO中设置,直接获取里面的值。采用类型约束,可以看到他即将输入什么值,如果输入类型错误,会报错提示。

pinia

无需动态注入,使用defineStore 就可以。可以使用类型推断。store都是有命名空间的,是单独的。可以使用store的循环依赖,只需要导入进去就行了。defineStore

custom render 为了实现跨平台渲染,将渲染器的createrRender函数单独分离出来。

支持用户自定义渲染,用户可以按照 创建节点,添加属性,挂载节点,三个步骤去实现渲染。 不仅仅局限于默认dom的渲染,还可以渲染canvas pixi.js 渲染游戏。 用createRender去创建实例,然后用createApp去调用render.createApp(APP).mount(game.stage);高阶函数的实现。

vue官网的 h渲染和jsx写法

渲染函数和jsx写法,jsx可以用map方式。

vue3.0 更新dom

先进行effect收集依赖,触发依赖去更新节点。虚拟dom是一个js对象,里面有节点信息,可以获取旧节点和当前节点进行比较。分为初始化和更新,初始化去渲染;更新的时候,先收集到依赖,再去触发依赖。新节点覆盖旧节点(删除原来的,添加一个新的);通过数值去更新视图。

更新props值开发思路

先完成主功能,在主功能的基础上去扩展其他场景的功能,再完善代码的健壮性。再将公共的功能抽取出来。