美文网首页
Vue之生命周期

Vue之生命周期

作者: hualayou | 来源:发表于2020-10-24 13:59 被阅读0次

new Vue()

创建一个Vue实例

beforeCreate

当执行到beforeCreate函数的时候,data上的数据还没有初始化好,methods中的方法也还没有初始化好,不可以去访问其中的数据和方法

created

当执行到create函数的时候,data和methods都已经初始化完毕了,此时,可以去访问其中的数据和方法了。

结论:

如果要操作data中的数据,或调用methods中的函数,最早,只能在created函数中进行

模板编译

这个阶段中,Vue正在编译我们的模板页面。当这个阶段执行完毕后,我们在浏览器的内存中,就已经有了编译好的页面结构了,但是这个编译好的模板结构只是在内存中,还没有被渲染到页面上,此时页面上是空白的。

beforeMounted

当模板页面被编译好之后,就会立即执行beforeMounted这个函数。此时,我们的HTML代码结构己经在内存中创建好了,但是尚未挂载到页面中。

结论:

在这个函数中,页面上的DOM元素是原始的差值表达式之类的Vue代码;

mounted

当执行完mounted函数,页面就已经真正的渲染好了,此时,Vue实例的创建阶段即将结束。

结论:

如果要引用一些第三方的插件来操作DOM元素,最好在mounted中去操作DOM元素,因为这时候才是真正的页面

beforeDestroy

在执行beforeDestroy函数的时候,VM实例还是正常可用的状态,此时还没有开始销毁。

destroyed

在destroyed函数中,VM实例被销毁不可正常使用。

相关文章

  • vue生命周期

    一 vue生命周期 Vue的生命周期:就是vue实例从创建到销毁的全过程 二 vue生命周期钩子 vue生命周期...

  • vue生命周期

    vue生命周期详: vue生命周期详解图: vue生命周期详解代码展示:

  • Vue生命周期

    Vue生命周期详解 一、Vue生命周期 与 作用 (生命周期钩子就是生命周期函数) (1)Vue生命周期:每个Vu...

  • vue3较vue2的特别之处 - 生命周期

    vue2 生命周期 vue3 生命周期 将 Vue2 的生命周期钩子代码更新到 Vue3 参考地址:https:/...

  • Vue 2.0修仙之路 — 生命周期和钩子函数

    生命周期过程 HTML代码 JS 代码 原网址:Vue之生命周期函数:https://cn.vuejs.org/v...

  • 前端之路-VUE面试题

    vue生命周期面试题vue 生命周期是什么? Vue 实例从创建到销毁的过程,就是生命周期 beforeCreat...

  • Vue.js入门(二):生命周期

    1 生命周期 Vue生命周期是Vue实例从创建到销毁的过程,就是生命周期。在Vue实例的生命周期过程中会运行生命周...

  • vue生命周期

    vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么?...

  • Vue 生命周期

    vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么?...

  • vue学习记录

    vue全家桶 vue生命周期 生命周期的理解 新建项目 ①:cnpm install vue-cli -g (全...

网友评论

      本文标题:Vue之生命周期

      本文链接:https://www.haomeiwen.com/subject/kpiimktx.html