Vue生命周期

迈不过友情╰ 2022-02-19 18:13 347阅读 0赞

#### 生命周期 ####

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5fMjg5MA_size_16_color_FFFFFF_t_70]

##### 钩子函数 #####

*  例1：created代表在vue实例创建后；我们可以在Vue中定义一个created函数，代表这个时期的构造函数：

<div id="app">
        {
       {hello}}
    </div>

结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5fMjg5MA_size_16_color_FFFFFF_t_70 1]

*  例2，Vue中各大钩子函数测试代码如下：

<!DOCTYPE html>
    <html>
    
       <head>
          <meta charset="utf-8" />
          <title>vuejs生命周期</title>
          <script src="vuejs-2.5.17.js"></script>
       </head>
    
       <body>
          <div id="app">
             {
       {message}}
          </div>
       </body>
       <script> var vm = new Vue({ el: "#app", data: { message: 'hello world' }, beforeCreate: function() { showData('创建vue实例前', this); }, created: function() { showData('创建vue实例后', this); }, beforeMount: function() { showData('挂载到dom前', this); }, mounted: function() { showData('挂载到dom后', this); }, beforeUpdate: function() { showData('数据变化更新前', this); }, updated: function() { showData('数据变化更新后', this); }, beforeDestroy: function() { showData('vue实例销毁前', this); }, destroyed: function() { showData('vue实例销毁后', this); } }); function realDom() { console.log('真实dom结构：' + document.getElementById('app').innerHTML); } function showData(process, obj) { console.log(process); console.log('data 数据：' + obj.message) console.log('挂载的对象：') console.log(obj.$el) realDom(); console.log('------------------') console.log('------------------') } vm.message = "good..."; vm.$destroy(); </script>
    
    </html>

结果：这个一定要自己亲自动手测试才能体会到Vue的强大之处。

`要是还有不太明白的地方请留言，评论必回`  
`要是对我的文章感兴趣的话，关注一下吧，谢谢！`

#### 上一篇：[vue 获取时间戳对象转换为日期格式][vue] ####

#### 下一篇：[前端HTML空格转义符总结][HTML] ####

原来微信打赏还可以备注哦

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5fMjg5MA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5fMjg5MA_size_16_color_FFFFFF_t_70]: /images/20220219/c1aa7bb9faa341339125604b030b2baf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5fMjg5MA_size_16_color_FFFFFF_t_70 1]: /images/20220219/b944846c5bb74c219547edc575e52112.png
[vue]: https://blog.csdn.net/chen_2890/article/details/89238845
[HTML]: https://blog.csdn.net/chen_2890/article/details/89204356
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5fMjg5MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20220219/018feeb280284952b13adc0df2e8434b.png