KSO - Vue2的生命周期的个人理解

观察代码data:(){ return { name:"", age:"", city:""} }, created :(){ this.name= "Geooo"this.age = "21"this.city ="东莞"var x = document.getElementById("name")//第一个命令台错误 console.log(x.innerHTML); }, mounted: (){ var x = document.getElementById("name")//第二个命令台输出的结果console.log(x.innerHTML); } }); 执行后可看到第一个命令是报错误的，第二个命令能运行
原理解释：1. created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图2. mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
过程解释
可以看到第一个报了错，实际是因为找不到id getElementById(ID) 并没有找到元素，原因如下：
在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素
mounted，由于此时html已经渲染出来了，所以可以直接操作dom节点，故输出了结果“Geooo”。add:function(){this.num++;
},
beforeCreate:function(){console.log('1-beforeCreate 初始化之前');
},
created:function(){console.log('2-created 创建完成');
},
beforeMount:function(){console.log('3-beforeMount 挂载之前');
},
mounted:function(){console.log('4-mounted 被挂载');
},
beforeUpdate:function(){console.log('5-beforeUpdate 数据更新前');
},
updated:function(){console.log('6-updated 被更新后');
},
activated:function(){console.log('7-activated');
},
deactivated:function(){console.log('8-deactivated');
},
beforeDestroy:function(){console.log('9-beforeDestroy 销毁之前');
},
destroyed:function(){console.log('10-destroyed 销毁之后')
}

KSO - Vue2的生命周期的个人理解相关推荐

Android中级教程之--------Android应用程序的生命周期(一定要理解,面试会问的哦!)
Android的应用程序的生命周期,我相信这在以后的Android面试一定是经常考的题目,所以大家一点要重视哦!下面我将图文双线程,希望对大家有一点帮助! 首先我们看一下Android应用程序的生命周 ...
vue 生命周期_深入理解Vue实例生命周期
‍vue实例生命周期与生命周期钩子‍ 每个 Vue 实例在被创建时都会经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 为了让开发者在 ...
activity 生命周期_如何理解安卓activity的生命周期(on-create篇)？
个人认为用类比的方式来学习新事物比较容易接受.我这里用蝴蝶的一生来做比喻. OnCreate阶段就像是蝴蝶的幼虫刚出卵里孵化出来,蝴蝶的一生只可能出生一次,oncreate只能被创建一次.蝴蝶刚出生的 ...
语言const的生命周期_如何理解一门编程语言2——以复制构造函数为例
前些天我发布了一篇文章<如何理解一门编程语言>,文中我以C++中的const为例,给大家分享了如何通过修饰词的修饰对象来理解编程语言中晦涩难记的语法. 如果把 const 作为一个形容词来 ...
vue2.0生命周期数据共享
3.1 组件的生命周期 1.概念 (1)生命周期:是指一个组件从创建.运行.销毁的整个阶段,强调的是一个时间段 (2)生命周期函数:是由vue框架提供的内置函数,会伴随组件的生命周期,自动按次序执行 ...
Vue-生命周期的理解+生命周期图示的理解
了解组件从创建-> 运行->销毁的三个阶段了解 vue 生命周期的一个过程生命周期生命周期(Life Cycle) 是指一个组件从创建 -> 运行 -> 销毁的整个阶 ...
Asp.net页面的生命周期之通俗理解
很早就看了cat chen的深入理解 ASP.NET 动态控件 (Part 3 - 页面生命周期) ,当时是理解了,但是很不好理解.尤其是追赶加载那部分.最近重新看到那篇文章,禁不住想用打比方的方式来 ...
歪解Activity生命周期-----初学者彻底理解指南
Activity是个神马玩意儿,和Android有神马关系,为什么毛要用这个,这个怎么用.本篇讲针对Activity做出详细描述,希望大家在看完这篇文章后,对Activity有个大概的了解. 1 ...
Vue生命周期钩子函数理解与使用场景
Vue生命周期钩子函数每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫 ...

KSO - Vue2的生命周期的个人理解

KSO - Vue2的生命周期的个人理解相关推荐

最新文章

热门文章