浅析Vue 生命周期

Vue 提供了11个钩子函数

1，从创建到销毁发生的一系列状态叫做什么周期，在这个过程中vue会提供状态函数给我们进行

该状态的操作，这个函数叫做钩子函数/生命周期函数/生命周期钩子

过程:

new Vue({})

Vue 实例初始化，读取所有的生命周期函数，并没有执行，不会调用

beforeCreate()

读取属性，计算属性，添加监听 set get方法，读取watch方法

create() 可以操作数据了

判断是否有el配置，或者是被调用了 $mount() 都会走下一步

判断有没有el或者是$mount()作用的dom结构

beforeMount是没有dom结构的

如果有dom结构，读取dom结构 渲染vue指令 {{}}，也就是挂载的过程

mounted() 可以操作ref

在这里可以用到 ref操作dom，用法为 ref="id",this.$refs,这里的id为唯一值，手写id会覆盖，但是用v-for 遍历ref，id成了一个数组，不会覆盖。

总结

以上所述是小编给大家介绍的Vue 生命周期，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue组件和Route的生命周期实例详解

    先讲点实际的 实用点的钩子: Created:vue实例被生成后的一个生命周期钩子函数.(页面初始化数据加载一般写这里); beforeCreate:给个loading界面 created撤销loading; beforeDestory:你确认删除XX吗? destoryed:当前组件已被删除,清空相关内容 关于Vue组件生命周期,翻译后图示: module.exports = { //props: ['父组建传的值'], data:function(){ lifecycle.push("dat

  • Vue中使用的EventBus有生命周期

    Vue中使用的EventBus有生命周期

    最近遇到了vue项目中的性能问题,整个项目不断的进行操作五分钟左右,页面已经很卡,查看页面占用了1.5G内存,经过排查一部分原因,是自己模块使用的eventBus在离开页面未进行off掉.我们进行下验证: 1.不随生命周期销毁 我们在home首页的代码是这样的: created () { let text = Array(1000000).fill('xxx').join(',') //创建一个大的字符串用于验证内存占用 $eventBus.$on('home-on', (...args) =>

  • Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

    Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项

  • vue组件生命周期详解

    本文实例为大家分享了vue组件生命周期的具体代码,供大家参考,具体内容如下 分为4个阶段: create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据 做逻辑判断 destroy:beforeDestroy destroyed 清理工作 代码: <!do

  • 深入理解Vue生命周期、手动挂载及挂载子组件

    深入理解Vue生命周期、手动挂载及挂载子组件

    本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip

  • 深入理解Vue父子组件生命周期执行顺序及钩子函数

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会. 1.vue的生命周期图 在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作.先列出vue官网上对各个钩子函数的详细解析. 生命周期钩子 生命周期钩子 详细 beforeCreate 在实例

  • 浅析Vue实例以及生命周期

    最简单的Vue 实例 //html <div id="app"> {{message}} </div> //javascript var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 由于 Vue 借鉴了 MVVM 的思想,这里的字符串 "Hello Vue!" 就相当于 Model,DOM 就相当于 View,Vue 实例 "vm" 则是起连接

  • 详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

    详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程:全局的, 单

  • 浅析Vue 生命周期

    浅析Vue 生命周期

    Vue 提供了11个钩子函数 1,从创建到销毁发生的一系列状态叫做什么周期,在这个过程中vue会提供状态函数给我们进行 该状态的操作,这个函数叫做钩子函数/生命周期函数/生命周期钩子 过程: new Vue({}) Vue 实例初始化,读取所有的生命周期函数,并没有执行,不会调用 beforeCreate() 读取属性,计算属性,添加监听 set get方法,读取watch方法 create() 可以操作数据了 判断是否有el配置,或者是被调用了 $mount() 都会走下一步 判断有没有el或

  • 详解Vue生命周期的示例

    详解Vue生命周期的示例

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></script> &

  • vue生命周期与钩子函数简单示例

    vue生命周期与钩子函数简单示例

    本文实例讲述了vue生命周期与钩子函数.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue生命周期与钩子函数</title> <style> </style> <script src="https://

  • vue生命周期和react生命周期对比【推荐】

    个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它. 一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h

  • 浅谈Vuex注入Vue生命周期的过程

    这篇文章是[前端词典]系列文章的第 13 篇文章,接下的 9 篇我会围绕着 Vue 展开,希望这 9 篇文章可以使大家加深对 Vue 的了解.当然这些文章的前提是默认你对 Vue 有一定的基础.如果一点基础都没有,建议先看官方文档. 第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会复杂很多. 为何使用 Vuex 使用 Vue 我们就不可避免的会遇

  • vue生命周期的探索

    vue生命周期的探索

    那么进入某个路由对应的组件的时候,我们会触发哪些类型的周期呢? 根实例的加载相关的生命周期(beforeCreate.created.beforeMount.mounted) 组件实例的加载相关的生命周期(beforeCreate.created.beforeMount.mounted) 全局路由勾子(router.beforeEach) 组件路由勾子(beforeRouteEnter) 组件路由勾子的next里的回调(beforeRouteEnter) 指令的周期(bind,inserted)

  • vue生命周期实例小结

    vue生命周期实例小结

    本文实例分析了vue生命周期.分享给大家供大家参考,具体如下: 每个Vue实例都存在完整的生命周期,经历从创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程.如下图所示 钩子函数 vue的完整生命周期可分为三个阶段:初始化阶段.运行阶段和销毁阶段.共存在很多钩子函数,他们在vue生命周期不同的阶段进行操作,列举如下: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy de

  • Vue生命周期activated之返回上一页不重新请求数据操作

    activated: 英文原意:使活动.触发 在Vue的生命周期函数中,这个好像用的不是特别多?(也许只是在我的工作中这个用的不多,或者说叫几乎不用这个) 一.需求 前不久在项目中有这样一个需求: 在订单页面的地址信息栏,默认通过接口填充了一个已经设置过的一个的默认地址,现在要跳转去地址列表重新选择一个地址并回填到订单页面的地址信息位置 二.尝试 常规操作: 我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用. 但是我们知道,

  • 浅谈vue生命周期共有几个阶段？分别是什么？

    一共8个阶段 1.beforeCreate(创建前) 2.created(创建后) 3.beforeMount(载入前) 4.mounted(载入后) 5.beforeUpdate(更新前) 6.updated(更新后) 7.beforeDestroy(销毁前) 8.destroyed(销毁后) vue第一次页面加载会触发哪几个钩子函数? beforeCreate.created.beforeMount.mounted DOM 渲染在哪个周期中就已经完成? mounted 补充知识:记录一次vu

随机推荐