vue2基础知识

发表于 更新于 分类于 ， 阅读次数： Changyan： 本文字数： 1k 阅读时长 ≈ 1 分钟
vue2中的页面渲染流程和原理

注入

image-20201110163548294

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

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

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

对象或数组默认值必须从一个工厂函数获取

虚拟DOM树

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

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

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

上面的对象描述了：

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

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

1
2
3
4
<div id="app">
  <h1>第一个vue应用：{{title}}</h1>
  <p>作者：{{author}}</p>
</div>

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

1
2
3
4
5
6
7
{
  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：

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

挂载

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

挂载的方式：

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

完整流程