vue.js中created方法作用

墨蓝 2022-06-05 01:16 213阅读 0赞

# [vue.js中created方法作用][vue.js_created] #

2017-05-22 16:08  12986人阅读  [评论][Link 1](1)  收藏  [举报][Link 2]

![category_icon.jpg][]  分类：

Vue框架（3） ![arrow_triangle_20_down.jpg][]

目录[(?)][Link 3][\[+\]][Link 3]

这是它的一个生命周期[钩子函数][Link 4]，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个[html元素][html]上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个[钩子函数][Link 4]，方便开发者在不同阶段处理不同逻辑。

一般可以在created函数中调用ajax获取页面[初始化][Link 5]所需的数据。

## 实例生命周期 ##

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如，`created` 这个钩子在实例被创建之后被调用：

<table style="width:776px; border-collapse:collapse; padding:0px; margin:0px"> 
 <tbody> 
  <tr style="width:776px; border-collapse:collapse; padding:0px; margin:0px"> 
   <td style="width:776px; border-collapse:collapse; padding:0px; margin:0px"> <pre style="white-space:pre-wrap; word-wrap:break-word">
      
       
     <div style="min-height:1.5em">
       
        
      <span style="color:rgb(233,105,0)">var</span> vm = 
       
        
      <span style="color:rgb(233,105,0)">new</span> Vue({
      
       
     </div>
      
       
     <div style="min-height:1.5em">  
       
        
      <span>data</span>: {
      
       
     </div>
      
       
     <div style="min-height:1.5em">    
       
        
      <span>a</span>: 
       
        
      <span style="color:rgb(174,129,255)">1</span>
      
       
     </div>
      
       
     <div style="min-height:1.5em">
      
        
         },
      
       
     </div>
      
       
     <div style="min-height:1.5em">  
       
        
      <span>created</span>: 
       
        
      <span><span style="color:rgb(0,146,219)">function</span> (<span></span>) </span>{
      
       
     </div>
      
       
     <div style="min-height:1.5em">    
       
        
      <span style="color:rgb(179,179,179)">// `this` 指向 vm 实例</span>
      
       
     </div>
      
       
     <div style="min-height:1.5em">    
       
        
      <span style="color:rgb(66,185,131)">console</span>.log(
       
        
      <span style="color:rgb(66,185,131)">'a is: '</span> + 
       
        
      <span style="color:rgb(233,105,0)">this</span>.a)
      
       
     </div>
      
       
     <div style="min-height:1.5em">
      
        
         }
      
       
     </div>
      
       
     <div style="min-height:1.5em">
      
        
       })
      
       
     </div>
      
       
     <div style="min-height:1.5em">
       
        
      <span style="color:rgb(179,179,179)">// -&gt; "a is: 1"</span>
      
       
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

也有一些其它的钩子，在实例生命周期的不同阶段调用，如 `mounted`、 `updated` 、`destroyed` 。钩子的 `this` 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分布在这些钩子中。

## 生命周期图示 ##

下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过以后它会有帮助。

![Lifecycle][]

[vue.js_created]: http://blog.csdn.net/shuidinaozhongyan/article/details/72627287
[Link 1]: http://blog.csdn.net/shuidinaozhongyan/article/details/72627287#comments
[Link 2]: http://blog.csdn.net/shuidinaozhongyan/article/details/72627287#report
[category_icon.jpg]: /images/20220605/f11e80399a3848fc915b8922a1debccf.png
[arrow_triangle_20_down.jpg]: /images/20220605/7467b9898efb49f68d2e0574dfd15bc2.png
[Link 3]: http://blog.csdn.net/shuidinaozhongyan/article/details/72627287#
[Link 4]: https://www.baidu.com/s?wd=%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4n1fLPyckrjTznHmknjfs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHb4nWndrHRznW6zPHm1P1b3Ps
[html]: https://www.baidu.com/s?wd=html%E5%85%83%E7%B4%A0&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4n1fLPyckrjTznHmknjfs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHb4nWndrHRznW6zPHm1P1b3Ps
[Link 5]: https://www.baidu.com/s?wd=%E5%88%9D%E5%A7%8B%E5%8C%96&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4n1fLPyckrjTznHmknjfs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHb4nWndrHRznW6zPHm1P1b3Ps
[Lifecycle]: http://cn.vuejs.org/images/lifecycle.png