vue.js设计与实现——读书笔记(每日更新)

第一篇 框架设计概览

第一章 权衡的艺术

1.1 命令式和声明式

视觉层框架主要分为命令式和声明式。

• 命令式：命令式框架的一大特点就是关注过程
• 声明式：声明式框架更注重结果

vue.js的内部实现一定是命令式的，而暴露给用户的却更加声明式

1.2 性能和可维护性的权衡

命令式代码的性能是一定优于声明式代码的！ 因为命令式代码是直接去更改差异，而声明式代码需要先找到差异，然后再去修改。所以命令式的性能是一定大于命令式的。并且在理论上命令式代码是可以做到极致的性能优化的，因为我们明确的知道哪些发生了改变，我们只需要去做必要的修改就可以。

但是为什么vue.js要使用声明式而不是选择命令式呢？？？

• 因为采用命令式开发，我们需要维护实现目标的整个过程，包括手动创建、删除和更新dom。而声明式代码直接展示的就是我们的结果。看上去更加直观。至于做事的过程我们不需要关心，vue的底层会帮我们去做掉这些东西。

框架的设计者为了让框架保持可维护性，并且性能损失最小化！vue就出现了下一章的虚拟dom！

1.3虚拟dom的性能到底如何

声明式代码比命令式代码多出一个找出差异的性能损耗，所以我们为了最小化这一差异化。出现了虚拟dom

接下来来对比一下innerHtml和虚拟dom创建页面的性能：

• innerHTML创建页面的性能：HTML字符串拼接的计算量 + innerHTML的dom计算
• 虚拟dom创建页面的性能：
  1. 创建JavaScript对象。
  2. 递归地遍历虚拟dom并创建真是dom

在创建页面的时候，我认为两者的差异并不大，因为他们都需要新建所有的DOM元素。

我们来对比一下innerHTML和虚拟dom更新页面时候的性能：

• innerHTML更新页面的过程是 重构HTML字符串，在重新设置DOM元素的innerHTML属性。哪怕只更改了一个字，我们也需要重新设置innerHTML。约等于销毁所有的dom元素，然后再重新创建全新的dom元素
• 虚拟dom更新页面：重新创建js对象（虚拟dom树），然后再比较新旧虚拟dom，找到它的差异，并且更新他。

虚拟dom，它是声明式的，因此心智负担小，可维护性强，性能虽然比不上极致优化的js对象，但是在 保证可维护性 和 保证心智负担 的前提下想当不错。

第二章 框架设计的核心要素

第三章 vue.js的设计思路

3.2 初识渲染器

渲染器的作用就是把虚拟dom转化为真实dom！

手写一个简单渲染器，将虚拟dom转化为真实dom

const vnode = {
  tag: 'div',
  props: {
    onclick: () => alert('hello')
  },
  children: 'click me'
}

// 手写一个渲染器，用来渲染上面的代码,把上面的代码渲染为真实dom
function renderer(vnode, container) {
  // 使用vnode.tag作为标签名创建DOM元素
  const el = document.createElement(vnode.tag)
  // 遍历vnode.props属性，将属性和事件添加到dom元素中
  for (const key in vnode.props) {
    // 如果开头以on结尾的key，说明是事件
    if (/^on/.test(key)) {
      el.addEventListener(
        // 
        key.substr(2).toLowerCase(), // 事件名称 onClick ---> click
        vnode.props[key] // 事件处理函数
      )
    }
  }
  if (typeof vnode.children === 'string'){
    // 如果是字符串，说明它是元素的文本子节点
    el.appendChild(document.createTextNode(vnode.children))
  }else if(Array.isArray(vnode.children)){
    vnode.children.forEach(v=>render(v,el))
  }
  container.appendChild(el)
}
// body作为挂载点
renderer(vnode,document.body)

3.3 组件的本质

虚拟dom其实就是用来描述真是的dom的普通js对象。

组件就是一组dom元素的封装！

3.4 模板的工作原理

编译器的作用：将模板编译为渲染函数！

其实在template标签里的内容就是模板内容，编译器会把模板内容编译成渲染函数并添加到

例如：

<template>
	<div @click="handler">
        click me
    </div>
</template>
<script>
	export default{
        methods:{
            handler(){
                
            }
        }
    }
</script>

浏览器运行的代码为：

export default{
    methods:{
        handler(){

        }
    },
    render(){
        return h('div',{onClick:handler},'click me')
    }
}

渲染的内容最终都是通过渲染函数产生的，然后渲染器再把渲染函数返回的虚拟dom渲染为真实dom，这就是模板的工作原理。也是vue渲染页面的流程。

3.5 Vue.js是各个模块组成的有机整体

组件的编译依赖于编译器，并且编译后生成的代码是根据渲染器和虚拟dom的设计决定的。

3.6 总结

1. 渲染器的作用：把虚拟dom对象渲染为真实的dom元素。
2. 渲染器的工作原理：递归地遍历虚拟dom对象，并调用原生的DOM API来完成真实的DOM创建。
3. 渲染器更新：通过diff算法找出变更点，并且只会更新需要更新的内容
4. 组件：组件其实就是一组虚拟DOM元素的封装，它可以是一个返回虚拟dom的函数，也可以是一个对象，但这个对象下必须要有一个函数用来产出组件要渲染的虚拟dom。
5. vue.js的模板会被一个叫 编译器 的程序编译为渲染函数
6. 编译器、渲染器都是 vue 的核心组成部分，他们共同构成一个有机的整体，不同模块之间互相配合，进一步提升框架的性能。

第二篇 响应系统

第四章 响应系统的作用与实现