《Vuejs设计与实现》8.12 第八章总结

156 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第33天,点击查看活动详情

又到了总结第八章的时间了,我们一起看看最近讲了什么。

挂载子节点和元素属性

这一节就是讲了如何挂载子节点,子节点一般是一个数组,因此我们只需要遍历数组,然后递归挂载即可。为了方便递归,我把节点中的属性扁平化,通过前缀判断它是事件还是属性,然后调用不同的方法设置,在一节里,我们简单粗暴的使用了setAttributeaddEventListener.

HTML Attributes 与 DOM Properties

这一节中主要讲了一些HTML AttributesDOM Properties的关系与关联,得出了一个结论:HTML Attributes设置的是DOM Properties的初始值,并且有时候不会互相响应。因此我们需要根据实际情况看是使用setAttribute还是dom.xxx

正确的设置元素属性

在了解到HTML AttributesDOM Properties的关系之后,我们再看如何正确的设置元素属性,其实就是再手工实现一遍浏览器的设置方法,注意HTML Attributes带有的自动矫正功能。

class的处理

这一章主要讲了vue对于className的一些增强处理,以及如何实现。找猫画虎,这章看完,你应该也同时了解了vue如何处理v-bind:style.

卸载操作

讲了挂载,自然有对应的卸载.我们把卸载操作封装出来,这样不但能卸载元素,还能触发beforeUnmount等声明周期

区分vnode类型

这里主要讲了vnode.type的类型,还有如何对比vnode去更新,此外还可以自定义vnode类型,来处理一些特殊的情况。

事件的处理

这一节主要讲了如何绑定事件,我们不再是简单的addEventListener,我们把事件处理函数封装到一个匿名函数中,在哪里可以有一些判断处理,最后再触发真实的事件处理函数

事件冒泡与更新时机问题

我们发现当父子元素都有绑定事件的时候容易出现冒泡问题,尤其是父元素绑定事件发生在事件冒泡之前,也就是说vue的更新操作发生在事件冒泡之前。解决的办法就是在上一节封装的匿名函数中加入绑定时间和触发时间,屏蔽所有绑定事件晚于触发时间的事件处理函数的执行

更新子节点

这一节主要看了一下更新子节点的情况,我是以newNode为主去判断子节点的变化的,与书中正好相反,大家可以相互印证。

文本节点和注释节点

这一节主要以注释节点作为例子,讲了如何实现一种注释节点,又如何通过createRenderer实现自定义节点的跨端渲染

Fragment

这一节主要讲了Fragment的原理和实现,突然发现Fragment并不难,它是一个虚拟的根节点,虚拟的DOM片段,因此我们只需要渲染它的children即可,不用管它本身的其他属性