vue-生命周期

2021-05-25 12:32:27 阅读：139 来源： 互联网

标签：生命周期 console log -- vue components import

<template>   <div class="hello">
      <p v-show="isShow" style="color:red;font-size:25px;">{{str1}}</p>       <p v-show="!isShow" style="color:green;font-size:25px;">{{str2}}</p>
      <p>----------------------</p>       <button @click="destroy">销毁</button>
  </div> </template>
<script> export default {   name: 'LifeCircle',   data() {    return {       isShow:false,       str1:'学院',       str2:'web'    }   },   methods:{     destroy(){         this.$destroy();     }   },   beforeCreate(){     console.log('子-1 beforeCreate()');   },   created(){     console.log('子-2 created()');   },   beforeMount(){      console.log('子-3 beforeMount()');     },   mounted(){      console.log('子-4 mounted()');        // 定时器      this.intervalId = setInterval(()=>{         this.isShow = !this.isShow;      },1000);
  },   beforeUpdate(){      console.log('子-5 beforeUpdate()');     },   updated(){      console.log('子-6 updated()');     },   beforeDestroy(){     console.log('子-7 beforeDestroy()');       // 清除定时器     clearInterval(this.intervalId)   },   destroyed(){        console.log('子-8 destroy()');     }
} </script> <style scoped> </style> App.js <template>   <div id="app">                                                                                    <LifeCircle/>
        </div> </template>
<script> import HelloWorld from './components/HelloWorld.vue' import Template from './components/Template.vue' import ComputedAndWatch from './components/ComputedAndWatch.vue' import ClassAndStyle from './components/ClassAndStyle.vue' import IfAndShow from './components/IfAndShow.vue' import IfAndElse from './components/IfAndElse.vue' import listReander from './components/listReander.vue' import listReanderDemo from './components/listReanderDemo.vue' import Other from './components/Other.vue' import Event from './components/Event.vue' import Demo from './components/Demo.vue' import LkFilter from './components/LkFilter.vue' import TransitionAndAnimateOne from './components/TransitionAndAnimateOne.vue' import TransitionAndAnimateTwo from './components/TransitionAndAnimateTwo.vue' import TransitionAndAnimateThree from './components/TransitionAndAnimateThree.vue' import TransitionAndAnimateFour from './components/TransitionAndAnimateFour.vue' import LifeCircle from './components/LifeCircle.vue'
export default {   name: 'app',   components: {     HelloWorld,     Template,     ComputedAndWatch,     ClassAndStyle,     IfAndShow,     IfAndElse,     listReander,     listReanderDemo,     Other,     Event,     Demo,     LkFilter,     TransitionAndAnimateOne,     TransitionAndAnimateTwo,     TransitionAndAnimateThree,     TransitionAndAnimateFour,     LifeCircle   },     beforeCreate(){     console.log('父-1 beforeCreate()');   },   created(){     console.log('父-2 created()');   },   beforeMount(){      console.log('父-3 beforeMount()');     },   mounted(){      console.log('父-4 mounted()');       },   beforeUpdate(){      console.log('父-5 beforeUpdate()');     },   updated(){      console.log('父-6 updated()');     },   beforeDestroy(){     console.log('父-7 beforeDestroy()');      },   destroyed(){        console.log('父-8 destroy()');     } }
</script>
<style> </style> 执行流程

标签：生命周期,console,log,--,vue,components,import
来源： https://www.cnblogs.com/eric-share/p/14808235.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-生命周期