挂载与更新(上)

71 阅读2分钟
  1. 挂载子节点与元素的属性在渲染时,新建一个专门挂载元素的方法,这个方法里不需要补丁或者其他的当有子元素为元素时,创建并挂载到当前元素,当子元素为文本时,挂载为文本,最后使用插入方法将归并后的元素插入到 指定容器内,这就完成了元素的挂载,紧接着处理元素属性,通过 遍历 props 然后通过统一的API 设置属性来完成DOM属性的挂载与更新
  2. HTML属性与DOM属性 HTML 属性大多有对应的DOM属性,只是名称不态一样,例 class DOM 中是 el.className, 其中有一个特殊属性 input中的value,当通过属性获取时只能获取属性的初始值,当input值改变后期属性值是不变的只有el.value才能够取值,
  3. 设置属性,当属性为特定属性时需要做判断例 :disabled 当disabled 值为 true与false都会设置为真,所以这里只能够通过DOM属性判断,因为设置属性操作,是DOM对象,非ES内容所有为了平台通用性将其封装为方法,
  4. class 的处理 通过className 对class属性做特殊处理
  5. 卸载操作 卸载操作通过访问当前元素的parent 然后通过parent.removeChild(el) 实现元素卸载操作,当需要卸要卸载组件时这个方法会很方便的调用钩子函数
  6. 区分vNode的类型 通过节点的标签类型 来判断是否需要重新挂载当前的新元素,如果标签一样进行打补丁操作,
  7. 事件的处理,VUE 通过将事件封装到一个属性里,然后在了个事件调用函数里使用这个函数并传入Event以达成事件的真实启用,当发生事件更新时直接改变属性值即可
  8. 事件冒泡与更新时机问题 在VUE 的DOM更新时会产生事件在DOM未渲染之前发生,这样是不合理的,可以通过事件点击的时间戳与现在时间比,如果大于则让事件发生否则不执行事件