本文共 872 字，大约阅读时间需要 2 分钟。

1.注入

vue会将以下配置注入到vue实例：

• data：和界面相关的数据
• computed：通过已有数据计算得来的数据，将来详细讲解
• methods：方法

模板中可以使用vue实例中的成员

2.虚拟DOM树

直接操作真实的DOM会引发严重的效率问题，vue使用虚拟DOM（vnode）的方式来描述要渲染的内容

vnode是一个普通的JS对象，用于描述界面上应该有什么，比如：

var vnode = {     tag: "h1",  children: [    {    tag: undefined, text: "第一个vue应用：Hello World"}  ]}

上面的对象描述了：

有一个标签名为h1的节点，它有一个子节点，该子节点是一个文本，内容为「第一个vue应用：Hello World」

vue模板并不是真实的DOM，它会被编译为虚拟DOM

   
  
    
第一个vue应用：{  {title}}
  
    
作者：{  {author}}
   

上面的模板会被编译为类似下面结构的虚拟DOM

{     tag: "div",  children: [    {    tag: "h1", children: [ {    text: "第一个vue应用：Hello World" } ] },    {    tag: "p", children: [ {    text: "作者：袁" } ] }  ]}

虚拟DOM树会最终生成为真实的DOM树

当数据变化后，将引发重新渲染，vue会比较新旧两棵vnode tree，找出差异，然后仅把差异部分应用到真实dom tree中

可见，在vue中，要得到最终的界面，必须要生成一个vnode tree

vue通过以下逻辑生成vnode tree：

注意：虚拟节点树必须是单根的

3.挂载

将生成的真实DOM树，放置到某个元素位置，称之为挂载

挂载的方式：

1. 通过el:"css选择器"进行配置
2. 通过vue实例.$mount("css选择器")进行配置

4.完整流程