目录
完整流程图
流程解释
注入
vue会将以下配置注入到vue实例:
- data:数据
- computed:通过已有数据计算得来的数据
- methods:方法
模板中可以直接使用vue实例中的成员
虚拟DOM树
- 根据浏览器渲染页面的原理我们可以得知,直接修改DOM会引起浏览器的重新渲染,这样会引发严重的效率问题。所以vue使用vnode(虚拟DOM)的方式来描述要渲染的内容。
- vnode是一个普通的JS对象,用于描述界面上应该有什么,比如:
const vnode = {
tag: "div",
children: [
{ tag: undefined, text: "Hello World"}
]
}
// 上面的对象可以理解为:
// 有一个叫div的节点,它有一个子节点,内容为一个文本,文本内容为:Hello World
- vue模板并不是真实的DOM,它会被render函数编译为虚拟DOM
// Vue模板内容
<div id="app">
<h1>第一个vue应用:{{title}}</h1>
<p>作者:{{author}}</p>
</div>
// 上面的模板会被编译为类似对象结构的虚拟DOM
{
tag: "div",
children: [
{ tag: "h1", children: [ { text: "第一个vue应用:Hello World" } ] },
{ tag: "p", children: [ { text: "作者:袁" } ] }
]
}
挂载
将生成的真实DOM树,放置到某个元素位置,称之为挂载
挂载的方式:
- 通过
el:"css选择器"
进行配置 - 通过
vue实例.$mount("css选择器")
进行配置