Vue生命周期

最新推荐文章于 2022-03-30 16:32:18 发布

我要取一个响亮的昵称

最新推荐文章于 2022-03-30 16:32:18 发布

阅读量185

点赞数

分类专栏： Vue 文章标签： Vue Vue生命周期

本文链接：https://blog.csdn.net/chen_2890/article/details/89343729

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

生命周期

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

钩子函数

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

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

<script src="vue-2.5.17.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           hello:''
       },
       created(){
           this.hello = 'czdx,一统江湖，千秋万代'
       }
    });
</script>

结果：
在这里插入图片描述

例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 获取时间戳对象转换为日期格式

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

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

在这里插入图片描述

我要取一个响亮的昵称

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue生命周期

生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。钩子函数例1：created代表在vue实例创建后；我们可以在Vue中定义一个created函数，代表这个时期的构造函数：<div id="app"> ...
复制链接

扫一扫

专栏目录