Vue实例生命周期

川长思鸟来 2021-10-19 23:58 398阅读 0赞

### 实例生命周期 ###

*  实例生命周期钩子
 *  生命周期图示

# 实例生命周期钩子 #

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。  
  比如 created 钩子可以用来在一个实例被创建之后执行代码：

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

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

# 生命周期图示 #

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lqbjE5OTU_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lqbjE5OTU_size_16_color_FFFFFF_t_70]: /images/20211019/ca012b2b95214254b77905192f78819c.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue实例以及生命周期

1.Vue实例API 1.构造器(实例化) 　var vm = new Vue(\{　　　　//选项　　　|-------DOM（3）　　　| 　　　　|

浅浅的花香味﹌/ 2023年08月17日 17:38/ 0 赞/ 136 阅读

相关 VUE 实例的生命周期

什么是VUE生命周期从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！ vue把整个生命周期划分为创建、更新、挂载、销毁等

亦凉/ 2023年06月29日 10:32/ 0 赞/ 19 阅读

相关 vue 实例的生命周期

<body> <div id="app"> <div>{ {msg}}</div> <button @clic

桃扇骨/ 2023年01月08日 04:22/ 0 赞/ 205 阅读

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

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

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

相关 Vue 实例生命周期

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

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

相关 Vue实例的生命周期

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

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

相关 vue实例的生命周期

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

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

相关 vue实例的生命周期

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

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

相关 Vue实例生命周期

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

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

相关 Vue实例的生命周期

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

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