大家好,又见面了,我是你们的朋友全栈君。
文章目录
一、前言
vue.js
中created
方法是一个生命周期钩子函数,一个vue
实例被生成后会调用这个函数。一个vue
实例被生成后还要绑定到某个html
元素上,之后还要进行编译,然后再插入到document
中。每一个阶段都会有一个钩子函数,方便开发者在不同阶段处理不同逻辑。
一般可以在created
函数中调用ajax
获取页面初始化所需的数据。
二、实例生命周期
每个 Vue
实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)
、编译模版、挂载实例到 DOM
,然后在数据变化时更新 DOM
。在这个过程中,实例也会调用一些生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。例如,created
钩子函数在实例被创建之后被调用:
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is:', this.a)
}
})
也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted
、 updated
、destroyed
。钩子函数中的 this
指向调用它的 Vue
实例。一些童鞋可能会问 Vue.js
是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。
2.1 钩子函数生命周期
三、Vue 生命周期 mounted 和 created 的区别
3.1 什么是生命周期?
通俗来说,生命周期就是Vue
实例或者组件从创建到销毁所经历的一系列过程。虽然不太严谨,但是也基本上可以理解。
3.2 created 和 mounted 区别
官方图解如下:
从上图可看到两个节点:
created
:在模板渲染成html
前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted
:在模板渲染成html
后调用,通常是初始化页面完成后,再对html
的dom
节点进行一些操作。
通常created
使用的次数多,而mounted
是在一些插件或组件的使用中进行操作,比如插件chart.js
的使用: var ctx = document.getElementById(ID);
通常会有这一步,而如果你写入组件中,你会发现在created
中无法对chart
进行一些初始化配置,一定要等这个html
渲染完后才可以进行,那么mounted
就是不二之选。下面看一个例子(用组件)。
3.2 示例
Vue.component("demo1",{
data:function(){
return {
name:"",
age:"",
city:""
}
},
template:"<ul><li id='name'>{
{name}}</li><li>{
{age}}</li><li>{
{city}}</li></ul>",
created:function(){
this.name="唐浩益"
this.age = "12"
this.city ="杭州"
var x = document.getElementById("name")//第一个命令台错误
console.log(x.innerHTML);
},
mounted:function(){
var x = document.getElementById("name")/</span>/第二个命令台输出的结果<span style="font-size: 14px;">
console.log(x.innerHTML);
}
});
var vm = new Vue({
el:"#example1"
})
可以看到输出如下:
可以看到都在created
赋予初始值的情况下成功渲染出来了。
但是同时看console
台如下:
可以看到第一个报了错,实际是因为找不到id,getElementById(ID)
并没有找到元素,原因如下:
在created
的时候,视图中的html
并没有渲染出来,所以此时如果直接去操作html
的dom
节点,一定找不到相关的元素。
而在mounted
中,由于此时html
已经渲染出来了,所以可以直接操作dom
节点,故输出了结果。
四、拓展阅读
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152870.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...