黑马eesy_15 Vue：03.生命周期与ajax异步请求&&04.vue案例

黑马eesy_15 Vue：02.常用语法

 

 

vue的生命周期与ajax异步请求

---

1、Vue的快速入门
2、Vue的语法
　　插值表达式
　　事件的绑定
　　数据的显示
　　逻辑判断和循环输出
3、Vue的生命周期
　　8个生命周期的执行点
　　　　4个基本的
　　　　4个特殊的
4、axios的ajax异步请求
　　它和jquery的ajax比较相似

5、综合案例
    实现用户的查询列表和更新操作
        前端：Vue
        后端：ssm

---

3.VueJS生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。

vue在生命周期中有这些状态，
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。

那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子 ：

 

vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容

• beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
• created ：数据已经绑定到了对象实例，但是还没有挂载对象

• beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点

• mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进 行各种操作

• 当我们的data发生改变时，会调用beforeUpdate和updated 

1. beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变。
2. updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新。

• beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动。
  

 

 

 

==============================

参考资料：

 

end