注入
$开头，vue提供给你提供的实用方法。
_方法 vue内部自己使用的方法
其他的都是自己定义的方法
vue会将以下配置注入到vue实例：
- data：和界面相关的数据
- computed：通过已有数据计算得来的数据，将来详细讲解
- methods：方法
何为注入？注入到data里面的，computed,methods里面的方法放到vue实例里面。 为了便于和自己定义的方法区分，所以vue会将自己的方法加上$ 和 _.
模板中可以使用vue实例中的成员 因为前面注入了product,totalStock,所以可以在模版中随便使用
虚拟DOM树
直接操作真实的DOM会引发严重的效率问题，vue使用虚拟DOM（vnode）的方式来描述要渲染的内容
虚拟dom就是一个普通的JS对象，用于描述界面上应该有什么，比如：
var vnode = {
tag: "h1",
children: [
{ tag: undefined, text: "第一个vue应用：Hello World"}
]
}
上面的对象描述了：
有一个标签名为h1的节点，它有一个子节点，该子节点是一个文本，内容为「第一个vue应用：Hello World」
vue模板并不是真实的DOM，它会被编译为虚拟DOM
<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: "作者：袁" } ] }
]
}
vue中的渲染指的是先生成虚拟dom，再生成真实dom的过程叫渲染。
虚拟DOM树会最终生成为真实的DOM树
当数据变化后，将引发重新渲染，vue会比较新旧两棵vnode tree，找出差异，然后仅把差异部分应用到真实dom tree中
可见，在vue中，要得到最终的界面，必须要生成一个vnode tree
vue通过以下逻辑生成vnode tree：
注意：虚拟节点树必须是单根的
1.先去看是否自定义了render方法,这个render方法会传去进一个参数createNode方法（这里用h表示），这是vue创建虚拟节点的办法，调用这个创建虚拟节点的方法，就可以创建一个虚拟节点，h("元素类型名称是div还是p"，[]里面可以写多个子元素)，也可以看到也有下面的语法，使用 h("h1", 第一个vue应用：${this.title})来创建虚拟元素，注意的是里面里面如果用到vue的实例，要用到字符串拼接的方法去写。即${this.vue 的实例}
需要注意的是当元素的内容发生改变，哪怕h1元素的文字改变了一个字，也是要重新生成一遍虚拟dom.
render(h) {
console.log("render");
return h("div", [
h("h1", `第一个vue应用：${this.title}`),
h("p", `作者：${this.author}`),
]);
},
上面的注意看如果没有配置template,那么就会将el对应的选择器获取到的元素，和他的子元素一块作为模版。所以配置模版的方式有两种，详细看下面的两种。
2.再看里面写了模版,模版可以用下面两种方式，优先看第一种方式
template: `<div>
<h1>第一个vue应用：{{title}}</h1>
<p>作者：{{author}}</p>
</div>`,
<div id="app">
<h1>系统名称：{{title}}</h1>
<ul>
<li v-for="(item, i) in products" :key="item.id">
{{item.name}}
</li>
</ul>
<p>总库存：{{totalStock}}</p>
</div>
挂载
将生成的真实DOM树，放置到某个元素位置，称之为挂载
挂载的两种方式：
- 通过
el:"css选择器"进行配置，一开始就配置好。 - 通过
vue实例.$mount("css选择器")进行配置，就是说可以先生成vue实例，后面再看如何处理
完整流程
何为渐进式？
- 先在老项目的某些区域用vue来写，再慢慢扩大。
- 学习曲线比较平滑，学一部分做一部分。
