vue生命周期
生命周期图解
第一个环节
- 里面定义了生命周期函数，和一些事件规则，data里面定义的数据还没有开始代理；
- 验证beforeCrete,没有数据代理和methods方法；
第二个环节
- 初始化数据监测和数据代理；
- vue如何检测数据变化的，如何检测数组变化的，给对象里面的属性匹配get和set的，都是在这个环节完成的；
- 那么就意味着可以访问到data里面的数据和methods里面的方法；
判断环节
- 是否有‘el’这个配置项，new vue的时候是否传el这个配置项了，看一下代码；
- 是否有template配置项，没有，往下走；
- 编译el的HTML作为一个模板，如果是模板就会解析，如果不是模板就不会解析，
:x='name'
- 此时这个方块里面的内容就是解析模板，就是写的一些插值语法和click事件等，都会解析了；并生成了虚拟DOM，还在内存中，还没有变成真是的DOM，就是展示原始的内容，没有解析的内容；
- beforeMount,挂载之前，已经编译了，但是页面还没有展示；
beforeMount() { console.log('---------------->beforeMount'); document.querySelector('h2').innerText = '哈哈' debugger },
- 最终都不奏效
- 在控制台document.querySelector('h2').innText = "哈哈"
- 断点放下去，试一下；
- 因为无论刚才怎么改，下一步都是把虚拟DOM改完转为真实DOM插入页面了，
- 如果写在代码里根本就看不到那个状态
转成真是DOM插入页面
虚拟dom存在$el里面
更新的流程
自我毁灭
