每天一点VUE（DAY 5-VUE2篇）

1、生命周期  

       8个常用的钩子：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed

         在new Vue后，首先会进行初始化，初始化生命周期，事件等，然后触发beforeCreate这个钩子，此时的vm无法访问data里面的数据和methods里面的方法；

        接下来进行数据代理和数据监测，然后触发created这个钩子，此时vm可以访问到data里面的数据和metheds里面的方法，但是页面上没有；

        然后判断vm实例有没有el绑定dom，如果没有el就等待vm.$mount(el)执行以后在继续向下,如果有el就判断实例中有没有template，没有的话就把el的outerhtml作为template，这个过程是解析模版，生成了虚拟DOM，然后存在内存中，

        接着触发beforeMount这个钩子，此时的页面还是没有经过Vue编译的页面，对DOM的所有 *** 作都最终（后面的转成真实DOM会给覆盖掉）都不生效，但是对vm *** 作会生效；

        接下来会生成一个vm.$el并且会用前面的el替换它，这是吧虚拟DOM变成了真实DOM，并且插入在页面上，然后会触发mount这个钩子，此时的页面是经过vue编译的页面，到这里初始化页面的过程结束，后面会开启定时器、发送网络请求，订阅消息，绑定自定义事件（注意当页面销毁时，只会解绑自定义事件，原本的click等事件还是生效的）等 *** 作；

        接下来vue会检测数据的变化，当检测到变化以后，会触发beforeUpdate这个钩子，然后数据会变成最新的，但是页面还是之前的（面试：那个生命周期的时候数据和页面不同步？），接下来会根据新的数据生成新的虚拟DOM，然后diff算法进行新旧页面的对比，最后完成页面的更新，这个过程完成了MVVM的从Model到View的更新，完成后会触发updated这个钩子，这时的数据和页面是同步的。

        接下来当调用了vm.$destroy()的时候，会触发beforeDestroy这个钩子，接下来我们一般在这个钩子这里关闭定时器，取消订阅消息，解绑自定义事件（注意当页面销毁时，只会解绑自定义事件，原本的click等事件还是生效的）等，当接触完了监视和子组件的事件监听后会触发destroyed这个钩子。

代码实验： 

	
		{{n}}
		
		点我n++并且查询在不在
	

2、组件

        2.1、非单文本组件的使用

组件：实现应用中局部代码和资源的集合

三个步骤：1、定义组件（定义的时候不要挂载el，data要写成函数形式）

                  2、注册组件（全局或者局部，注册时如果和原本名字一样可以简写）

                  3、使用组件（在DOM里面使用注册的名字）

        2.2、组件使用的注意事项

注册的几个注意事项：

1、我们给组件起名字的时候要避开原有的那些标签名字，多个单词的话建议写成短”-“连接的形式（abc-def），Vue开发者工具里面的名字会把组件名字的首字母大写（AbcDef），如果名字有多个单词，我门也可以把名字写成首字母大写的（AbcDef），但是在引入vue.js的文件里面会报错，但是在vue脚手架里面不会。（总而言之，建议用大驼峰和首字母大写起名）

2、我们在使用组件的时候也可以使用的形式，但是要注意如果页面引用了多个相同的组件全是自闭的这种形式的话，在引入vue.js的文件这个情况下会只出现一个，但是在脚手架情况下不会。

3、我们在定义组件的时候也可以采用简写的形式，省去extend直接写成对象形式，里面写上配置项，vue如果我们没有extend的话vue会帮我们加上(实际上我们传入的是配置项，在我们extend以后，他会帮我吗创建一个实例对象)。

4、有个name配置项，是修改vue开发者工具里面的组件名称。

        2.3、组件的嵌套

我们在开发中一般会把所有组件放在一个app组件里面