【无标题】_html-js-css

Vue的生命周期

接上文

<body>
    <div id="app">
        <p>{{message}}</p>
        <button @click="changeMsg">改变</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        methods: {
            changeMsg () {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log('------初始化前------')
            console.log(this.message)
            console.log(this.$el)
        },
        created () {
            console.log('------初始化完成------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount () {
            console.log('------挂载前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted () {
            console.log('------挂载完成---------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------更新前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        updated() {
            console.log('------更新后---------')
            console.log(this.message)
            console.log(this.$el)
        }
    })
</script>

从上面我们可以看出几点，

首次，只执行了4个生命周期，beforeCreate，created, beforeMount, mounted。
同时，我们可以看出，第一个生命周期中，我们拿不到data中的数据，因为这个时候数据还未初始化
created中，我们可以拿到data中的message数据了，因为初始化已经完成
beforeMount中，我们可以看出，我们拿到了 e l ，而 m o u n t e d 中，我们也拿到了 el，而mounted中，我们也拿到了 el，而mounted中，我们也拿到了el，不过好像有点不一样是吧。一个好像是渲染前的，一个是渲染后的。对的。看过MVVM响应式原来或者Vue源码你们就会发现，最初其实我们是会去让this.KaTeX parse error: Expected 'EOF', got '#' at position 54: …中，其实我们拿到的就是页面中的#̲app。而再继续往后，首先我们…el啊。这也就是我们前面所说到的替换 e l 是什么意思了。所以，在 m o u n t e d 中，我们所得到的渲染完成后的 el是什么意思了。所以，在mounted中，我们所得到的渲染完成后的 el是什么意思了。所以，在mounted中，我们所得到的渲染完成后的el。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/940374.html

【无标题】

发表评论

评论列表（0条）