由于对vue生命周期理解的不透彻引发的ref属性的问题

之前对vue的生命周期是对于口头上的理解(没有应用于实战) 而今天写了个demo 关于ref属性应用的问题

在此重新理解下vue的生命周期

vue的生命周期就是vue的实例对象从创建到销毁的过程

1.创建前(beforeCreate): 实例初始化后,数据观察和时间机制都没形成，不能获取到Dom的节点。

2.创建后(created):在这个阶段，vue实例已经创建，仍然不能获取Dom。

3.载入前(beforeMount):在这一阶段,依然不能获取Dom元素，但是vue挂载的根节点已经创建，下面vue对Dom的操作将围绕这个根节点进行。

4.载入后(mounted) :数据和Dom都已经被渲染 (一般异步请求)

5.更新前(beforeUpdate):这一阶段，vue遵循着数据驱动dom的原则，beforeUpdate函数在数据更新后虽然没立即更新数据，但是Dom会改变。

6.更新后(update):这一阶段Dom会和更改过的内容同步

7.销毁前(beforeDestory)

8.销毁后(destoryed)

在这里说下ref属性的应用

this.$refs.input 相当于document.getElementById(‘input‘) 就是获取了Dom这个节点因此可以直接操作这个data属性

原文地址：https://www.cnblogs.com/wangXinYuFarly/p/12641585.html

时间： 2024-07-31 19:59:45

由于对vue生命周期理解的不透彻引发的ref属性的问题的相关文章

Vue生命周期详解（1）- 单个组件

刚接触vue,使用vue并没意识到生命周期的重要性.直到项目深入,在解决父组件异步加载数据传给子组件并渲染时首次渲染异常的问题时,浪费了很多时间,才发现自己对vue生命周期理解的欠缺.因此,这次专门重新学习一下vue的生命周期并总结在这里分享,希望对大家有所帮助. 首先上官方大图(是不是很高大上?然而,有点晦涩,对初学者不是很友好!) 不过不用担心,咱们程序员不就是实践出真知嘛!上代码: 1 <!DOCTYPE html> 2 <html lang="en">

简单记录一下vue生命周期及父组件和子组件生命周期钩子执行顺序

首先,vue生命周期可以用下图来简单理解当然这也是官方文档的图片,详细的vue周期详解请参考这里然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 子组件更新过程父beforeUpdate->子beforeUpdate->子up

Vue生命周期钩子---2

vue生命周期简介咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执行. ps:下面代码可以直接复制出去执行 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="http

vue 生命周期初探

vue 以后发之势加上其独有的特性(压缩后很小),轻量级的MVVM框架,目前github star已有5.94万,而react 7万.由此可见是两个非常热门前端框架.这里就vue的生命周期做个初步体验. 发现看视频,动手之后,过段时间还是会忘,所以写一篇短文以备不时之需. 先附上官网的图片:vue生命周期生命周期的钩子函数如果使用得当,会大大增加开发效率: 生命周期实践: 为了更好的查看beforeUpdate.updated,beforeDestroy,destroy钩子函数,使用v-on绑

vue生命周期的介绍

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue生命周期</title> 6 <script src="../js/vue.js"></script> 7 <meta name="viewport" content="width=devic

线程的生命周期 - 理解Java中线程的状态

刚刚开始学cocos2-x,仅仅是按照教程把已经安了一般Android的开发环境的eclipse重新升级到安装好cdt和ndk就花了我几十小时,差点都要放弃了. 参考博客 D:\cocos2d-x\cocos2d-x-2.2.3\cocos2dx\platform\third_party\android\prebuilt 说说大概的过程: 下载ndk插件,ndk包,cdt插件.最开始我按照书上的下载了cocos2d-x 2.0.1,希望跟书上统一起来,这样以后学习的时候可以参考书上的也不会遇到太

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生命周期学习心得(上)http://www.cnblogs.com/pengshadouble/p/7488330.html通过vue生命周期学习心得(上),大至了解了vue生命周期的8个阶段及相关钩子函数触发的时间点,这章我们通过简单的代码看一下具体的运行结果: <template> <div id="container"> <headers></headers> <router-view></router

Vue生命周期及业务场景使用

vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么? beforeCreate 实例创建前:这个阶段实例的data.methods是读不到的created 实例创建后:这个阶段已经完成了数据观测(data observer),属性和方法的运算, watch/event 事件回调.mount挂载阶段还没开始,$el 属性目前不可见,数据并没有在DOM元素上进行渲染beforeMount:在挂载开始之前被调用:相关的 render 函数首