《vue.js设计与实现》1-3章小结

一、关于vue声明式渲染的理解

视图层的框架分为命令式和声明式。原生的dom操作就是命令式的，比如：

const div = document.querySelector('#app')
div.innerText = 'hello world'
div.addEventListener('click',()=>{alert('ok)})

而vue使用的声明式注重结果，比如：

<div @click="()=>alert('ok')">hello world</div>

这两种方式相比命令式代码的更新性能消耗小，因为声明式要多出一部分找出差异的性能消耗。但是，声明式代码更易于维护。
vue为了在保持可维护性的同时最小化找出差异的性能消耗，就使用了虚拟dom，虚拟dom其实就是js对象。
并且，vue采用运行时+编译时的架构。纯运行时框架会通过一个渲染函数将树形结构的js对象递归的渲染为dom元素，缺点在于无法得知哪些内容会发生改变，不利于之后的更新。纯编译时框架是将HTML字符串直接编译为命令式代码，缺点在于缺乏灵活性。vue将两种方式结合，先通过编译器将HTML字符串编译为树形结构的js对象，再通过渲染函数渲染为dom元素。

二、vue 的核心组成部分

vue的核心组成部分包括编译器和渲染器。我们常见的一个.vue文件如下所示：

<template>
  <div @click="handler">
    click me
  </div>
</template>

<script>
export default {
  data(){}
  methods:{
  	handler:()=>{}
  }
}
</script>

template标签中的内容就是模版，编译器会把模版内容编译为渲染函数并添加到script标签的组件对象上。组件其实就是一组dom元素的封装，上述渲染函数会返回虚拟dom对象，再通过渲染器将虚拟dom渲染为真实dom。
其中，渲染器会通过判断虚拟dom的tag属性，来区分是普通标签元素还是组件，如果是组件，就先获取组件要渲染的内容，再递归调用渲染器。