vue 生命周期2 创建流程 beforeCreate created 挂载流程 beforeMount mounted

 要点：
讲了红框没框到的部分

 1.

这边注意数据代理还没有开始,也就是说data 和vm_data vm.n还没生成

 但上图绿色框的不是生命周期只是一个环节,下图红色框的才是生命周期 

 因为数据代理还没开始所以这个生命周期beforeCreate 无法通过vm访问到data中的数据、methods的方法

 验证：使用debugger断点,观察vue实例的内容

发现下面没有_data 就验证了没有进行数据代理等关于数据的操作,也没有methods方法 

2.

 

验证：

发现vue里面有了add方法,有了n有了_data

并且n的get和set都出现了 有了数据监测和数据代理 

、 

 

3.

这边假设el传了则直接往下走

 然后没有配置template则,走右边

翻译为编译el的外部HTML作为vue的模板

这边outer指的是绿色框的

如果为inter则为红色框的

比如

在div属性加上一个v-bind,如果为outer则会去解析,如果为inter则不会去解析

所以这边outerHTML就是连div也算的模板

当没又el时vue就不知道为哪个容器服务

就执行前面两个周期函数不执行下去了

、

如果之后再调了 vm.$mount('root')则会发现又继续解析下面没执行的周期函数

当有template时则往左走

编译template到render函数（专门用于渲染的）

template时, 配置在vue实例中,后面放字符串,字符串内容就是html写的内容

看这边div中已经没有东西的,都写在了template上了

不换行的情况下用‘’写

换行的情况下用``写

 然后vue就用template里面的东西进行解析模板放到div上

但发现报错

因为这段字符串里面有两个节点一个h2 一个button

解决方法：
1.

在外面包一个div,把真正要写的东西放在里面

显示正确

如果用template包的话

不行报错

 不能用template元素因为里面可以有多个节点

但是不是template不能用,而是不能把template在template对象中当作根元素用

template这样写是可以的 

页面没有报错 

 区别

正常写法的话都进行了解析 

 

如果用template写：

发现div 的root没了 x也没了

也就是说

用template写就是,会把template里面写的完全替代body里的对应容器 在body里写的都白写了

 

验证：

发现页面上的数据还未经解析

其实vue已经解析好了只是还没放入页面

 

验证二,验证所有对dom的操作最终都是不奏效的 注意最终

当修改页面的dom元素发现发生了改变

 但是把断点放下去值又变成了之前

再写成这种形式：

 发现都出现不了哈哈,说明,在这个阶段,操作不了dom,操作了也白操作

4.

vue把虚拟dom转成了真实dom,并在vm.$el上存了一份,因为当以前的真实dom与最近更新的虚拟dom进行比较时,重复的会进行复用

验证：vm.$el 为真实dom

结果显示为真实dom 

 

 

验证：

所有的东西都解析完了

对dom的操作有效