Vue技术17.2分析生命周期

最新推荐文章于 2024-11-01 14:29:13 发布

yitahutu79

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量99

点赞数

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

本文链接：https://blog.csdn.net/qq_40713201/article/details/126313581

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8" />
        <title>分析生命周期</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
            
         -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>当前的值是：{{n}}</h2>
            <button @click="add">点我n+1</button>
            <button @click="bye">点我销毁vm</button>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                opacity:1,
                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)
           // debugger
           },
           updated() {
            console.log('updated')
            console.log(this)
           // debugger
           },
           beforeDestroy() {
            console.log('beforeDestroy')
            console.log(this)
           // debugger
           },
           destroyed() {
            console.log('destroyed')
            console.log(this)
            //debugger
           },
        })
    </script>
</html>