大家好，又见面了，我是你们的朋友全栈君。
文章目录 - 一、前言
- 二、实例生命周期
- 2.1 钩子函数生命周期
- 三、Vue 生命周期 mounted 和 created 的区别
- 3.1 什么是生命周期？
- 3.2 created 和 mounted 区别
- 3.2 示例
- 四、拓展阅读
- 2.1 钩子函数生命周期
- 3.1 什么是生命周期？
- 3.2 created 和 mounted 区别
- 3.2 示例
一、前言
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
节点，故输出了结果。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/152870.html原文链接：https://javaforall.cn