vue.js ：一套用于构建用户界面的渐进式框架

vue.js 开发的四个优点：

1.声明式数据

2.响应式数据绑定

3.组件化开发

4.虚拟DOM

1.声明的变量值可直接在html中用 {

{}} 引用

2.响应式数据绑定是通过v-model 指令来实时改变数据值

比如：申明一个变量值，在input中用v-model绑定，当变量值改变时input中的框也会随之改变

3.组件化开发有利于开发人员开发，把功能模块化，不用多个模块结合在一起开发。

在单页面应用中：通过把多个模块组件化，在父级应用界面中写好每个模块的位置（通过组件和配置路由）

4.关于虚拟DOM：是与计算DOM的各种操作，把最后一次的结果给渲染出来 （减少DOM的渲染次数）

浏览器渲染界面速度慢的原因：浏览器自身处理DOM 的性能瓶颈，当使用jQuery和原生的js DOM操作函数的时候，浏览器会频繁的渲染新的DOM树，又因为浏览器的DOM处理瓶颈问题，所以就更慢了！

知道了vue.js是啥和开发优点后，我们就可以开始进入vue的学习了！（vue的安装，介绍，vue实例，模板语法 就不多说了-->可以看vue.js教程前几节  ）

 

一：Vue实例生命周期钩子

关于Vue 的生命周期的说法：

beforeCreate(即将创建):此阶段是实例初始化阶段，此时的data（数据）和el（DOM）都还没有生成（都为undefined！），

因此在 beforeCreate 钩子函数中不能使用data的数据，也无法获取到 DOM 的节点。

created（创建完毕）:此阶段是Vue的实例已经创建完毕，此时能获取到data中的数据值，但是DOM的属性值还是不存在，因为在源码中，初始化方法执行完

created 函数之后编译器还没有将template 解析成 render方法，DOM也就没有相关的属性值!

beforemount(即将挂载)：此阶段是将vue的实例挂载到Dom上，Vue通过一个el 参数来确定挂载的DOM节点，当我们根据vue构建函数new一个新的Vue时，只要设定

el元素，那么这个新的Vue的操作将只对这个 el及其子元素有效!

mounted(渲染完毕)：此阶段是vue实例 和 Dom的元素都已被获取和渲染。是使用次数最多的钩子函数，一般放异步请求！

beforeUpdate（即将更新渲染）：Vue遵循数据驱动Dom的原则，当修改vue实例的data时，vue会自动帮我们更新视图。beforeUpdate 在数据更新后没有立即改变

beforeUpdate 函数中的值（在beforeUpdate 函数中测试数据是否改变了！），但是Dom中的数据已经更新了（Vue的双向绑定）。

updated（更新渲染后）：Dom 和 updated 函数中的测试打印的值相同。（得到目的：就是data中改变数据，dom中 和 updated 函数中确实是更新了新数据值！）

beforeDestroy（销毁之前）：当vue已经成功通过数据驱动dom 更新后，我们不再需要这个Vue在操作dom 时，就需要销毁vue （也就是清除Vue实例和DOM的关联）,

调用destroy() 可以销毁当前组件，销毁之前，就会触发beforedestroy 钩子函数。

destroyed（销毁之后）：销毁之后，会触发destroyed钩子函数，在调用destroy()之前，改变Data中的数据，DOM也会随之改变，beforeDestroy 中测试读取的

值也和更新后的值相同，但是在destroy()调用之后，当改变了Data中的数据，Dom 中的值 ，和 destroyed 函数中的值不会改变。销毁之后，解除了Vue也Dom的绑定关系！

Vue的数据 和 Dom不在改变，说明成功销毁了这个实例。

 

二：Vue的生命周期图

 

 

此博客仅为自己学习记录所用，如有不对之处，请大佬们指出批评，感谢！