Vue生命周期函数

最新推荐文章于 2024-07-12 21:32:38 发布
最新推荐文章于 2024-07-12 21:32:38 发布
阅读量195 收藏
点赞数
分类专栏： vue 文章标签： vue js 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42132814/article/details/109615014
版权

Vue生命周期函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。注：生命周期函数是每个Vue实例的函数

在这里插入图片描述

Vue生命周期函数分为三个阶段

  • 创建阶段

    • beforeCreate:这个阶段只是初始化事件和生命周期函数，Vue实例上挂载的元素el和data对象都是undefined，还没有进行初始化。可以在这里加一个loading事件，在加载实例时触发。

    • created：这个阶段进行了各种初始化，Vue实例中的data和methods都已经初始化好了，可以访问，但是此时并没有挂载到DOM上，元素el也还没有。初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

      • 这里会进行el的判断，如果有el，就继续向下编译，如果没有，则停止编译，也就意味着停止生命周期，知道子啊该Vue实例上调用。

      • 接下来判断是否有template，如果参数中有template参数选项，则将其作为模板编译成render函数。如果没有则将外部的HTML作为模板编译，由此可见template中的模板的优先级是要高于外部HTML的。

        <!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1>{{message+'这是outHTML中的html'}}</h1>
  </div>
  <script src="../vue包/vue.js"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        message: 'vue生命周期函数'
      },
      template: "<h1>{{message+'这是template中的html'}}</h1>"
    })
  </script>
</body>

</html>

        在这里插入图片描述

        当将Vue实例中template注释掉时页面显示：

    在这里插入图片描述

    **render函数选项   >   template参数选项    >  外部HTML**

    • beforeMount：模板在内存中已经编译好了，但是并没有挂载到页面中，Vue实例中的el和data都初始化好了，在挂载之前都是虚拟的DOM节点。

    • mounted：模板被挂载到了页面上，DOM也被渲染上来了，Vue实例中的el和data等也被挂载到了真实的DOM上，可以进行DOM操作了。

  • 运行阶段

    • beforeUpdate：当数据发生改变后，数据被渲染到DOM上之前触发此函数，此时data中的数据已经被改变了，但是DOM上的数据还是原来的数据。
    • updated：将发生改变的数据渲染到页面上去。这个阶段可以写一些对数据进行处理的函数。

  • 销毁阶段

    • beforeDestroy：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件。

    • beforeDestroy：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件。

    • destroyed：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁。

TuMinQiang
关注
专栏目录
vue的生命周期函数
weixin_53690943的博客
03-15 188
路由钩子函数/导航守卫 1.全局–写在路由配置文件index.js中（全部路由变化） 改变前：拦截操作 router.beforeEach:(ro,from,next)=>{ }; 改变后：获取路由信息 router.afterEach:(ro,from,next)=>{ }; 进入完成、解析：获取路由信息 2.组件内：写在组件内（当前组件涉及的路有变化） 进入前：beforeRouteEnter:(to,from,next)=>{ }; 发生改变：befo
vue生命周期函数
qq_40899714的博客
01-24 294
生命周期图 随着vue学习，生命周期图参考价值会越来越高。 init events and lifecycle(初始化事件和生命周期） init injections or reactivity(初始注入和反应） has el option(具有el 选项） when vm.mount(el)iscalled(vm.mount(el) is called(vm.mount(el)iscall...
Vue的几个生命周期函数
laya1211的博客
09-09 2695
生命周期是指一个组件从创建->运行->销毁的整个阶段，强调的是时间段。生命周期函数是由Vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。注意：生命周期强调的是时间段，生命周期函数强调的是时间点。下面有个图帮助我们理解生命周期的各个阶段。
Vue的生命周期函数有哪些？详细说明
hexadecimal_001的博客
07-12 803
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。- 使用场景：在此阶段无法访问 `data`、`methods`、`computed` 以及 `props`，适合执行一些初始化逻辑，如设置初始数据。- 使用场景：通常在这里可以访问组件的 `render` 函数中的虚拟 DOM，可以在渲染之前最后一次修改组件的数据。- 使用场景：可以在这里执行操作，如 DOM 操作、初始化第三方库等，因为此时可以访问到真实的 DOM。
vue 的生命周期函数
snowflak的博客
05-26 7869
vue 的生命周期函数，有那些？在项目中怎么使用？以及应用场景？ 1.vue的生命周期函数分为：创建前 beforeCreate :在实例初始化之后执行此时对象还未创建，el 和data并未初始化，因此无法访问 methods,data ,computed等方法和数据。 2.创建后：created：最早开始使用data和methods中的数据的钩子函数，这个阶段可以数据请求，但是不能dom操作。 3.挂载前：beforeMount:挂载开始之前被调用，把data里面的数据和模板生成html，完成了el和da
Vue 生命周期函数
白菜执笔人的博客
03-25 173
项目前导 学习笔记 一、生命周期函数         生命周期函数代表的是 Vue 实例，或者是 Vue 组件，在网页中各个生命阶段所执行的函数。生命周期函数可以分为 创建阶段 、运行期间 以及 销毁期间。其中： 创建期间的函数有：beforeCreate、created、beforeMount、mounted； 运行期间的函数有：beforeU...
vue 生命周期函数
12-21
在Vue应用中，每个组件都有其特定的生命周期，生命周期函数是理解Vue工作原理的关键部分。本篇文章将深入探讨Vue组件的生命周期及其相关的知识点。 1. **Vue组件生命周期** Vue组件从创建到销毁的过程可以分为几个...
vue生命周期函数选项案例：涵盖了 2.x 和 3.x 两个版本
最新发布
08-02
这份资源全方位地阐述了 Vue 生命周期选项的相关案例，涵盖了 2.x 和 3.x 两个版本。还对 2.x 与 3.x 版本中销毁组件的方法进行了对比分析。通过这样的方式，让读者能够清晰地认识到什么是生命周期钩子，进而加深对 ...
Vue生命周期函数异步获取数据时的问题
xunfengZ的博客
11-19 1286
由于async await的作用，created生命周期函数会被加入到微任务的事件队列，所以会先继续向下执行其他函数，等执行完了宏任务，最后在执行事件队列中的微任务。 beforeCreate() {}, //组件创建之后 async created() { let res = await movieDetail(this.$route.params.filmid); // console.log(res); this.film = res.data.data.film;
前后端问题,vue生命周期函数图示
09-22
vue
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值