vue生命周期图示

.luluHoney

已于 2022-05-04 21:54:20 修改

阅读量670

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2022-05-04 16:48:32 首次发布

本文链接：https://blog.csdn.net/weixin_50443809/article/details/124573283

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

利用断点来去查看钩子函数的执行过程

三个阶段：

挂载阶段——>更新阶段——>销毁阶段

 <body>
  <div id="root">
       <h2>当前的n值是:{{n}}</h2>
       <button @click="add">点我n+1</button>
       <button @click="bye">点我销毁vm</button>
  </div>
  
</body>
<script type='text/javascript'>
    Vue.config.productionTip=false// 以阻止 vue 在启动时生成生产提示
    new Vue({
     el:'#root',
     data:{
         n:1
     },
     methods: {
         add(){
             this.n++
         },
         bye(){
             console.log('bye')
             this.$destroy()
         }
     },
     beforeCreate() {
         console.log('beforeCreate');
        //  console.log(this);
        //  debugger;
     },
     created() {
         console.log('created');
        //  console.log(this);
        //     debugger;
     },
     beforeMount() {
        console.log(' beforeMount');
        //  console.log(this);
        //     debugger;
     },
     mounted() {
         console.log('mounted');
        //   console.log(this);
        //     debugger;
     },
     beforeUpdate() {
        console.log('beforeUpdate');
        //   console.log(this.n);
        //     debugger;
     },
     updated() {
        console.log('updated')
        //    console.log(this.n);
        //     debugger;
     },
     })
    </script>

.luluHoney

关注

0
点赞
踩
0

收藏

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

利用断点来去查看钩子函数的执行过程 <body> <div id="root"> <h2>当前的n值是:{{n}}</h2> <button @click="add">点我n+1</button> <button @click="bye">点我销毁vm</button> </div> </body><script t
复制链接

扫一扫