我们可以看到通过$nextTick我们可以对异步函数的结果进行各自的操作
一.Vue生命周期简介官网:https://cn./v2/api/#beforeCreate Vue提供给我们的钩子为上图的红色的文字 二.钩子详解1.beforeCreate在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。 我们在上面的例子中在的beforeCreate钩子中调用Vue的data和method,来看一下结果: 可以看到Vue中的data和方法都是去不到的,并且是在wath之前执行 2.created实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。 结果: 可以看到:created钩子可以获取Vue的data,调用Vue方法,获取原本HTML上的直接加载出来的DOM,但是无法获取到通过挂载模板生成的DOM(例如:v-for循环遍历Vue.list生成li) 3.beforeMount在挂载开始之前被调用:相关的 render 函数(模板)首次被调用。 结果 beforeMount: 1 4.mountedel 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。 结果 mounted: 3 5.beforeUpdate数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。 6.updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 数据更新就会触发(vue所有的数据只有有更新就会触发),如果想数据一遍就做统一的处理,可以用这个,如果想对不同数据的更新做不同的处理可以用nextTick,或者是watch进行监听 7.beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。 8.destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。 结果: 可以看打到销毁Vue实例时会调用这两个函数 补充$mount当你vue没有挂在el时,我们可以用$mount 三.钩子的一些实战用法1.异步函数这里我们用定时器来做异步函数 结果为: 这是不是意味着可以直接在update函数中操作呢,其实不是,因为update函数是针对vue的所有数据的变化,而我们也有可能会有其他数据的变化。 例如下面的例子: 结果为: 2.Vue.nextTick对异步函数的结果进行操作我们想要改变数据时,各自触发各自的方法 结果: 我们可以看到通过$nextTick我们可以对异步函数的结果进行各自的操作 |
|