2.Vue核心概念

一、完整流程

二、注入

1. vue会将以下配置注入到vue实例。

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

三、什么是虚拟DOM树

1. 直接操作真实dom会引发效率问题，vue使用虚拟DOM（vnode）的方式来描述要渲染的内容，vnode就是一个普通的对象，用于描述页面上应该有什么，比如

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

• 上面的对象描述了页面上应该有一个h1节点，他有一个子节点，该节点是一个文本节点，内容为「第一个vue应用：Hello World」。

四、编译与渲染

1. vue模版并不是真实的DOM，它会被编译成虚拟DOM，即模板生成虚拟DOM的过程叫做编译。

<div id="app">
  <h1>第一个vue应用：{{title}}</h1>
  <p>作者：{{author}}</p>
</div>
//上面的模版会被编译为类似于下面的虚拟DOM
{
	tag:"div",
	children:[
		{
			tag:"h1",
			children:[
				text:"第一个vue应用，HelloWorld"
			]
		},
		{
			tag:"p",
			children:[
				text:"作者：wh"
			]
		}
	]
}

2. 虚拟DOM树最终会生成真实DOM，生成真实DOM的过程叫做渲染。
   

五、挂载

1. 将生成的真实dom树，放置到某个元素位置，称之为挂载。
2. 挂载方式

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

六、数据变化，重新如何渲染

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

七、生成虚拟dom树的逻辑？

1. vue配置中有一个render函数，该render函数的返回值就是虚拟dom树。

• render函数用参数h创建虚拟节点，参数h是一个回调函数，h第一个参数是虚拟节点名，第二个参数是子节点数组。

render(h) {
    console.log("render");
    return h("div", [
        h("h1", `第一个vue应用：${this.title}`),
        h("p", `作者：${this.author}`),
    ]);
}

2. 编译的优先级：render > template > el。