vue面试题（这是本人总结:vue.js设计与实现课本的内容）

阅读本篇面试题，你会清楚什么是vue，他有什么特点，与其他框架有什么优缺点

• 第一章总结

• 1.问：什么是vue

• 答：vue是一个声明式，编译时+运行时的UI框架。

• 2.问：什么是Tree-Shaking?

• 答：Tree-Shaking指的就是消除哪些永远不会被执行的代码（课本原话）

• 问：什么是虚拟DOM

• 答：用JavaScript对象来描述UI的方式，其实就是所谓的虚拟DOM(28页课本原话)。

• 另外一句原话：它其实就是用JavaScript对象来描述真实的DOM结构

• 课本代码参考：

import {h} from 'vue'
export default{
render(){
  return h('h1',{onClick:handler}) //虚拟 DOM
}

3.问：虚拟DOM是如何变成真实DOM的？

• 答：通过渲染器来转变成真实dom.

4.问：什么是组件？

• 组件就是一组DOM元素的封装,这组DOM元素就是组件要渲染的内容，因此我们可以定义一个函数来代表组件，而函数的返回值就是代表组件要渲染的内容：

const myComponent = function(){
return {
  tag:'div',
  props:{
    onClick:()=>alert('hello')
  },
  children:'click me'
}
}

可以看到，组件的返回值就是虚拟DOM，它代表组件需要渲染的内容。（以上32页课本原话）

5.问：说说vue模板的工作原理

• 答：首先，vue的模板是用template标签来定义的，template标签的内容就是模板的内容，对于编译器来说，模板就是一个普通的字符串，它会分析该字符串并生成一个功能与之相同的渲染函数:

    <div @click='handler'> click me </div>
   变成 --->
    render(){
     return h('h',{onClick:handler},'click me')
    }

编译器会把模板内容编译成渲染函数并添加到

最后总结：无论是使用模板还是直接手写渲染函数，对于一个组件来说，它要渲染的内容最终都是通过渲染函数产生的，然后渲染器再把渲染函数返回的虚拟DOM渲染为真实DOM，这就是模板的工作原理，也是Vue.js渲染页面的流程。