资讯专栏INFORMATION COLUMN

Vue 生命周期

tyheist / 921人阅读

摘要:提供了个钩子函数,从创建到销毁发生的一系列状态叫做什么周期,在这个过程中会提供状态函数给我们进行该状态的操作,这个函数叫做钩子函数生命周期函数生命周期钩子过程实例初始化,读取所有的生命周期函数,并没有执行,不会调用读取属性,计算属性,添加监

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成了一个数组,不会覆盖。

跟用户交互

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95570.html

相关文章

  • Vue生命周期

    摘要:和下面手动调用在控制台中输入在这个阶段会销毁实例,生命周期结束。外部实例中的函数显示的效果参考链接组件的生命周期详解生命周期 为什么要认识Vue的生命周期 Vue的生命周期是一个非常重要的点,如果不懂Vue的生命周期,那么很多时候,就不知道Vue的实际渲染时机,程序中会出现各种bug。 因此,学习Vue的生命周期是非常用必要的。 showImg(https://segmentfault...

    y1chuan 评论0 收藏0
  • 详解vue生命周期

    摘要:注意看下此时还是没有选项钩子函数和间的生命周期在这一阶段发生的事情还是比较多的。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变,会触发对应组件的重新渲染,先后调用和钩子函数。 首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉: showImg(https://segmentfau...

    svtter 评论0 收藏0
  • vue生命周期

    摘要:接触两个月了,今天说一说里边很重要的生命周期,记得最开始接触的时候我问了一下周边的同事,这些生命周期都有什么用,得到的答案是里边可以操作属性,你记住就完事了,于是乎。。。 接触Vue两个月了,今天说一说vue里边很重要的生命周期,记得最开始接触的时候我问了一下周边的同事,这些生命周期都有什么用,得到的答案是mounted里边可以操作属性,你记住mounted就完事了,于是乎。。。 数据...

    godlong_X 评论0 收藏0
  • Vue 实例中的生命周期钩子详解

    摘要:实例在文档中经常会使用这个变量名表示实例,在实例化时,需要传入一个选项对象,它可以包含数据模板挂载元素方法生命周期钩子等选项。通俗说就是实例从创建到销毁的过程,就是生命周期。 Vue 实例中的生命周期钩子 Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑、数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程...

    gityuan 评论0 收藏0
  • Vue 2.0 浅谈--生命周期和钩子函数

    摘要:前言用也有一段时间了发现生命周期是很重要的一部分稍微懂得了一些东西特地来分享一下生命周期和钩子函数介绍啥也不说先上图图为生命周期图图为生命周期图图为和钩子函数比较重点看生命周期和钩子函数具体上代码自己粘走执行创建前状态创建完毕状态 前言 用Vue也有一段时间了,发现生命周期是很重要的一部分,稍微懂得了一些东西,特地来分享一下. 生命周期和钩子函数-介绍 啥也不说先上图图-1为 Vue...

    NikoManiac 评论0 收藏0

发表评论

0条评论

tyheist

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<