vue生命周期（上）

雨点打透心脏的1/2处 2023-02-18 03:15 1阅读 0赞

> 最近开始使用vue了，发现之前还没有写过关于vue生命周期的博客，今天先来聊聊：

简单来说：就是创建前—>创建后——>挂载前——>挂载后——>更新前——>更新后——>卸载前——>卸载后

这次先说一下关于创建（create  和挂载mount）也就是前4个生命周期

<template>
      <div>
          <p>{
       {msg}}</p>
          <button @click="test">test</button>
          <hr>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          msg: '生命周期？？？'
        }
      },
    //el  指的是元素
    //data  值的是数据
      beforeCreate () {
        console.log(1);//1
        console.log(this.$el);//undefined
        console.log(this.$data)//undefined
      },
      created () {
        console.log(2);//2
        console.log(this.$el)//undefined
        console.log(this.$data)//初始化
      },
      beforeMount () {
        console.log(3);//3
        console.log(this.$el);//undefined
        console.log(this.$data);//初始化
      },
      mounted () {
        console.log(4);//4
        console.log(this.$el);//初始化
        console.log(this.$data);//初始化
        // this.$router.push('/')
      },
      methods: {
        test () {
          console.log('lalala')
        }
      }
    
    }
    </script>
    
    <style>
    
    </style>

发表评论取消回复

表情：

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

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

相关阅读

相关 vue生命周期（上）

> 最近开始使用vue了，发现之前还没有写过关于vue生命周期的博客，今天先来聊聊：简单来说：就是创建前—>创建后——>挂载前——>挂载后——>更新前——>更新后——>卸载

雨点打透心脏的1/2处/ 2023年02月18日 03:15/ 0 赞/ 2 阅读

相关 vue生命周期

vue官网讲解生命周期传送门-[添加链接描述][Link 1] beforecreate() 在实例初始化之后，数据观测 (data observer) 和

清疚/ 2022年12月01日 03:38/ 0 赞/ 14 阅读

相关 Vue 生命周期

![Vue生命周期][Vue] [Vue]: /images/20221024/3af81cc9d5f4472a88a4a70a27d2da5c.png

向右看齐/ 2022年10月29日 14:23/ 0 赞/ 14 阅读

相关 Vue生命周期

[github地址:https://github.com/manlili/vue\_learn里面的lesson03][github_https_github.com_manl

淩亂°似流年/ 2022年06月17日 13:27/ 0 赞/ 34 阅读

相关 vue生命周期

vue生命周期的理解 vue生命周期是指vue实例对象从创建之初到销毁的过程。 vue的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后 vue生

忘是亡心i/ 2022年05月29日 06:22/ 0 赞/ 46 阅读

相关 vue 生命周期

<!DOCTYPE html> <html> <head> <title></title> <script type="

刺骨的言语ヽ痛彻心扉/ 2022年05月12日 11:14/ 0 赞/ 29 阅读

相关 vue 生命周期

1/ beforeCreate() 在创建Vue对象之前；用途动画加载 2/ created() 组件（Vue的实例化对象）创建好了，属性也绑定了，但是DOM还没生成；用

港控/mmm°/ 2022年04月22日 14:30/ 0 赞/ 210 阅读

相关 Vue 生命周期

/\ \ @version: V.1.0.0.1 \ @Author: fenggang \ @Date: 2019-06-18 19:38:19 \ @LastEdi

约定不等于承诺〃/ 2021年12月15日 01:49/ 0 赞/ 162 阅读

相关 vue生命周期

总览 ![331769-20180909094731362-16918169.png][] vue的生命周期可简单的从上边这张图了解，红圆角矩形就是生命周期函数相应

ゞ浴缸里的玫瑰/ 2021年12月12日 07:37/ 0 赞/ 440 阅读

相关 vue 04 -上生命周期

> 1-1、一开始就可以拿到截止到Mounted <body> <div id="app"> { {msg}

红太狼/ 2021年12月10日 14:07/ 0 赞/ 169 阅读