vue3.0系列(vue2.6-cli3.x)生命周期(钩子函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生命周期</title>
</head>
<body>
    <div id="app">
        <h1> {{ message }}</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            // el: '#app',
            data: {
                message: '嘻嘻哈哈'
            },
            
            beforeCreate() {
                // Vue 实例创建前被调用,数据和模板均未获取到
                console.log('beforeCreate()', this.$el, this.$data)
            },

            created () {
                // Vue实例创建后,最早可以获取到 data数据的钩子,但是模板未获取到
                // 建议在这里面发送 ajax 异步请求
                console.log('created()', this.$el, this.$data)
            },

            beforeMount() {
                // 数据挂载之前,获取到了模板,但是数据还未挂载到模板上
                console.log('beforeMount()', this.$el, this.$data)
            },

            mounted() {
                // 数据已经挂载到模板中了
                console.log('mounted()', this.$el, this.$data)
            },

            beforeUpdate() {
                // 当data 数据更新之后,去更新模板中的数据前调用
                console.log('beforeUpdate()', this.$el.innerHTML, this.$data)
            },

            updated() {
                console.log('updated()', this.$el.innerHTML, this.$data)
            },

            beforeDestroy() {
                //销毁 Vue 实例之前调用
                // 收尾工作
                console.log('beforeDestroy()')
            },

            destroyed() {
                //销毁 Vue 实例之后调用
                console.log('destroyed()')
            },
        }).$mount('#app') // 如果实例中没有 el 选项,可使用 $mount()手动挂载 Dom


       // vm.$destroy() // 销毁Vue实例
    </script>
</body>
</html>

你可能感兴趣的:(vue)