vue 04 -上生命周期

红太狼 2021-12-10 14:07 174阅读 0赞

> 1-1、一开始就可以拿到截止到Mounted

<body>
      
      <div id="app">
        {
        {msg}}
      </div>
      <script>
        let vm = new Vue({
    
          el:'#app',
          
          data:{msg:'数据'},
    
          beforeCreate(){
            console.log('beforeCreate')
          },
          created(){
            console.log('created')
          },
    
          beforeMount(){
            console.log('beforeMount')
          },
          mounted(){
            console.log('mounted')
          },
    
          beforeUpdate(){
            console.log('beforeUpdate')
          },
          updated(){
            console.log('updated')
          },
    
          beforeDestroy(){
            console.log('beforeDestory')
          },
          
          destroyed(){
            console.log('destoryed')
          }
    
        })
      </script>

![1666447-20190620222134974-203737165.png][]

#### 1-2当vm.msg内容发生变化时 ####

![1666447-20190620222351455-7624393.png][]

### 1-3当destory时 ###

![1666447-20190620222518515-1760278466.png][]

> 2-1看下不同的钩子函数能拿到什么(创造前后拿的是vue实例，挂载前后和更新前后都是真实dom）  
> \`\`\`

\`\`

转载于:https://www.cnblogs.com/sansancn/p/11062464.html

[1666447-20190620222134974-203737165.png]: /images/20211210/e5aab089528246dc89f74ceb93d73904.png
[1666447-20190620222351455-7624393.png]: /images/20211210/99804b8dc9954862a93629e04e3873d0.png
[1666447-20190620222518515-1760278466.png]: /images/20211210/cc1c6001a2bd4078b85821aee96a7d3c.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue生命周期（上）

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

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

相关 vue生命周期

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

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

相关 Vue 生命周期

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

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

相关 Vue生命周期

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

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

相关 vue生命周期

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

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

相关 vue 生命周期

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

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

相关 vue 生命周期

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

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

相关 Vue 生命周期

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

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

相关 vue生命周期

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

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

相关 vue 04 -上生命周期

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

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