Vue.js 中 created 生命周期钩子的作用与使用场景

created钩子基本作用

created是Vue实例的一个生命周期钩子函数，在Vue实例生成后立即被调用。实例生成后，还需要绑定到具体的HTML元素，随后进行编译，最终插入到document中。每个阶段都对应特定的钩子函数，便于开发者在不同阶段处理相应的业务逻辑。

通常建议在created钩子中通过Ajax请求获取页面初始化所需的数据，以确保在视图渲染前数据已就绪。

实例生命周期

Vue实例生命周期概述

每个Vue实例在创建前都会经历一系列初始化过程，包括配置数据观测（data observer）、编译模板、挂载实例到DOM，以及在数据变化时更新DOM。在此过程中，实例会调用一系列生命周期钩子，为执行自定义逻辑提供机会。例如，created钩子在实例创建完成后被调用：

var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// -> "a is: 1" 

此外还有其他钩子，如mounted、updated、destroyed等，在生命周期的不同阶段被调用。这些钩子中的this均指向调用它的Vue实例。部分开发者可能会询问Vue.js是否具备“控制器”概念，答案是否定的。组件的自定义逻辑可以分布在这些钩子中实现。

生命周期图示

下图展示了实例的生命周期流程。初学者无需立即理解所有细节，但随着开发深入，它将提供重要帮助。

补充：

created与mounted的区别

Vue生命周期中mounted和created的区别

一、什么是生命周期？

通俗而言，生命周期指Vue实例或组件从创建到销毁所经历的一系列过程。尽管表述不够严谨，但有助于理解其基本流程。

通过实践整理常见问题，本文重点记录created和mounted的区别：

二、created和mounted区别？

官方图解如下：

我们从图中关注两个关键节点：

created：在模板渲染成HTML之前调用，通常用于初始化某些属性值，随后再渲染视图。

mounted：在模板渲染成HTML之后调用，通常在页面HTML渲染完成后，对DOM节点执行特定操作。

两者概念清晰。通常created使用频率较高，而mounted多用于插件或组件的操作，例如使用chart.js插件时：var ctx = document.getElementById(ID)。这一步骤通常需要在mounted中执行，若放入created中，会发现无法对chart进行初始化配置，因为此时HTML尚未渲染完毕，因此mounted是更合适的选择。以下通过一个组件示例进行说明。

代码示例分析

三、例子

<span style="font-size: 14px;">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" 
 })</span> 

可以看到输出如下：

在created中赋予初始值的情况下，页面成功渲染。

同时观察控制台输出：

可以看到第一个命令台报错，实际原因是找不到id，getElementById(ID)未能定位到元素，原因如下：

在created阶段，视图中的HTML尚未渲染，此时若直接操作HTML的DOM节点，必然无法找到相关元素。

而在mounted阶段，由于HTML已经渲染完成，可以直接操作DOM节点，因此输出了结果“唐浩益”。

以上是我对mounted和created区别的总结，内容较为简略，旨在记录并加深印象。

总结

以上所述是小编给大家介绍的vue.js中created方法作用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！