Vue实例生命周期以及图示

川长思鸟来 2022-04-22 05:16 198阅读 0赞

<body>
      <div id="app"></div>
    
      <script>
        var vm = new Vue({
          el: '#app',
          template: "<div>hello world</div>"
          data: {
            test: 'hello world'
          },
          beforeCreate: function() {
            console.log("beforeCreate");
          },
          created: function() {
            console.log("created");
          },
          beforeMount: function() {
            console.log(this.$el);
            console.log("beforeMount");
          },
          mounted: function() {
            console.log(this.$el);
            console.log("mounted");
          },
          beforeDestroy: function() {
            console.log("beforeDestroy");
          },
          destroyed: function() {
            console.log("destroyed");
          },
          beforeUpdate: function() {
            console.log("beforeUpdate");
          },
          updated: function() {
            console.log("updated");
          }
        })
      </script>
    <body>

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: /images/20220422/5cd736e3d2b5469ba4b5bb4ef24d004a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实例、指令、生命周期

vue实例、指令、生命周期本章重点 1、生命周期 2、插值 3、指令一、创建一个实例vue实例每一个vue应用都是通过vue函数创建一个新的vue

曾经终败给现在/ 2022年11月21日 09:53/ 0 赞/ 204 阅读

相关 VUE生命周期图示

![这里写图片描述][lifecycle.png] > 转载自：[https://cn.vuejs.org/v2/guide/instance.html\][https_cn

亦凉/ 2022年06月17日 04:56/ 0 赞/ 153 阅读

相关 Vue 实例生命周期

一、生命周期 Vue 应用都是通过 [Vue 实例][Vue]（ViewModel）完成的，Vue 创建实例需要一系列的初始化动作，需要设置数据监听、编译模板、将实例挂载

Bertha 。/ 2022年05月21日 13:10/ 0 赞/ 369 阅读

相关 Vue实例的生命周期

原文转自[https://segmentfault.com/a/1190000008570622][https_segmentfault.com_a_1190000008570

旧城等待，/ 2022年05月11日 16:38/ 0 赞/ 270 阅读

相关 Vue生命周期图示

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

末蓝、/ 2022年04月22日 09:08/ 0 赞/ 282 阅读

相关 Vue实例生命周期以及图示

<body> <div id="app"></div> <script> var vm = new Vue({

川长思鸟来/ 2022年04月22日 05:16/ 0 赞/ 199 阅读

相关 vue实例的生命周期

[vue实例的生命周期][vue] 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！ [生命周期钩子]

妖狐艹你老母/ 2022年03月17日 01:56/ 0 赞/ 254 阅读

相关 vue实例的生命周期

vue生命周期主要的生命周期函数分类： -------------------- 创建期间的生命周期函数：创建vue--编译模板--挂载 --------------

柔光的暖阳◎/ 2022年01月12日 08:51/ 0 赞/ 256 阅读

相关 Vue实例生命周期

实例生命周期实例生命周期钩子生命周期图示实例生命周期钩子每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、

川长思鸟来/ 2021年10月19日 23:58/ 0 赞/ 391 阅读

相关 Vue实例的生命周期

Vue实例的生命周期 1、生命周期图示来自于Vue官网：[生命周期图示][Link 1] ![在这里插入图片描述][watermark_type_ZmFuZ3p

清疚/ 2021年09月08日 03:18/ 0 赞/ 439 阅读