Vue.js设计与实现（读书笔记）

框架设计概览

第一章 权衡的艺术

第二章 框架设的核心要素

提升用户的开发体验

为了防止出错误时，控制台报出许多JavaScript层面的错误信息，例如

Uncaught TypeError:Cannot read property ‘xxx’ of null
而根据此消息我们很难知道问题在哪儿，所以在设计和开发过程中，提供友好的警告信息至关重要。当然这只是相对开发环境来说。这些警告字符串在生产环境中会变得无意义，并且会增大应用程序的负担。此外，有一些警告检查还会产生些许的运行时开销，在生产模式下可以避免这些开销。

模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  (摘自与官网)
  所以当我们开发完一个项目时，会在main.js中添上Vue.config.productionTip = false，减小代码体积，避免额外开销，

错误处理

举一个简单的例子，开发一个工具模块，代码如下：

//utils.js
export default {
  foo(fn) {
    fn & fn()
  }
}

该模块导出一个对象，其中foo属性是一个对象，接受一个回调函数作为参数，调用foo函数时会执行回调函数，在用户侧使用时：

import utils from 'utils.js'
utils.foo(() => {
  //....
})

大家思考一下，如果用户提供的回调函数在执行时出错了，怎么办？第一个方法就是让用户自行处理，需要用户自己执行try…catch:

import utils from 'utils.js'
utils.foo(() => {
  try {
    //...
  }catch(e) {
    //...
  }
})

这会增加用户使用的负担，所以vue在内部进行了错误的处理，并且将其分装为错误处理接口，当用户在使用的时候，进行注册错误处理程序，然后在错误捕获后，把错误传递给用户注册的错误处理程序，便是vue错误处理的原理。

良好的TypeScript类型支持

TypeScript是由微软开源的编程语言，简称TS，它是JavaScript的超集，能够为JavaScript提供类型支持。本章总结中提到一句话，让我也改变一贯的认知，“使用TS编写框架和框架对TS类型支持有好是两种完全不同的事。”

第三章 VUe.js的设计思路

声明式UI： Vue.js 3是一个声明式UI框架
声明式描述UI的方式有两种
1.模板描述
2.JavaScript对象描述

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

• 使用JavaScript对象来描述UI的方式，便是所谓的 虚拟DOM
• 一个组件要渲染的内容就是通过渲染函数来描述的

初始渲染器

渲染器的作用就是把虚拟DOM渲染为真是DOM

function renderer(vnode, continer) {
     // 使用虚拟dom的属性创建节点
     const el = document.createElement(vnode.tag);
     // 遍历vnode属性，将节点的属性或方法添加到dom元素
     for (const key in vnode.props) {
       if (/^on/.test(key)) {
         el.addEventListener(
           key.substring(2).toLowerCase(),
           vnode.props[key]
         )
       }
     }

     // 处理children
     if (typeof vnode.children === 'string') {
       el.appendChild(document.createTextNode(vnode.children))
     } else if (Array.isArray(vnode.children)) {
       vnode.children.array.forEach(child => {
         renderer(child, el)
       });
     }
     continer.appendChild(el)
   }

渲染器函数接受两个参数：

• vnode：虚拟DOM对象
• container：一个真实的DOM元素

组件的本质

虚拟DOM除了可以描述真实DOM外，还可以描述组件。

组件就是一组DOM元素的封装

const vnode = {
  tag:MyConpnent
}

当期描述组件的时候，tag属性所表述的不再是一个标签名称，而是
组件函数。但同时组件就一定时函数吗？当然不是，组件还可以是对象来表达。

模板的工作原理

无论是手写虚拟DOM还是使用模板，都属于声明式地描述UI，并且Vue同时支持这两种UI表示方式。
那么模板是怎么工作的----> 编译器

编译器的作用就是将模板编译为渲染函数
如下模板

<div @click='handler'>
  click me
</div>

对于编译器来说，模板就是一个字符串，它会分析该字符串并生成一个功能与之相同的渲染函数。

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

一个.vue文件就是一个组件.

<template>
  <div @click='handler'>
  click me
  </div>
</template>
<script>
  export default {
  data() {/*···*/},
  methods:{/*···*/},
}
</script>

template标签里的内容就是模板内容，编译器会把模板内容编译成渲染函数并添加到script标签块的组件对象上，所以最终在浏览器运行的代码是：

export default {
  data() {/*···*/},
  methods:{/*···*/},
  render() {
    return h('div',{onClick:handler},'click me')
  }
}

对于一个组件来说，它要渲染的内容最终都是通过渲染函数产生的，然后渲染器再把渲染函数返回的虚拟DOM渲染为真实DOM，这就是模板的工作原理，也就是vue渲染页面的流程。