Vue3.0学习笔记-vm和生命周期函数-优快云博客

本文链接：https://blog.youkuaiyun.com/petit_wu/article/details/114298480

本文探讨Vue3.0中的vm（ViewModel）及其生命周期变化。介绍了从beforeCreate到unmounted的八大生命周期函数，并指出在Vue3.0中，这些函数已更新为setup(), onBeforeMount等新的调用方式。" 107627622,8765248,SQL数据库对象搜索方法大全,"['数据库', 'SQL Server Management Studio', '搜索工具']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vm和生命周期函数

createApp({})

mount()

根组件vm -- proxy形式的对象

mvvm模式 vm -- viewModel

生命周期函数 -- 在某个特定时刻自动执行的函数

有八个生命周期函数，

beforeCreate( ) ：在实例生成之前会自动执行的函数
created( ) : 在实例生成之后会自动执行的函数
beforeMount( ) : 在模板渲染完成之前执行的函数
mounted( ) : 在模板渲染完成之后执行的函数
beforeUpdate ：当data中的数据变化时，会立即自动执行的函数
updated：当data中的数据发生变化，页面重新渲染完后，会自动执行的函数
beforeUnmount( ) :当Vue应用失效时，会自动执行的函数
unmounted() : 当Vue应用失效时，且DOM完全销毁之后，会自动执行

但在vue3中，会使用新的函数调用方式

beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

Demo6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello world'
            }
        },
        template: '<h1>{{message}}</h1>'
    });
    const vm = app.mount("#app");
    console.log(vm);
</script>
</html>

Demo7.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello world'
            }
        },
        methods: {
            messageBtnClick() {
                this.message = this.message == 'Hello world' ? 'Good Bye' : 'Hello world';
            }
        },
        beforeCreate() {
            console.log('beforeCreate');
            console.log(document.getElementById('app').innerHTML);
        },
        created() {
            console.log('created');
            console.log(document.getElementById('app').innerHTML);
        },
        beforeMount() {
            console.log('beforeMount');
            console.log(document.getElementById('app').innerHTML);
        },
        mounted() {
            console.log('mounted');
            console.log(document.getElementById('app').innerHTML);
        },
        beforeUpdate() {
            console.log('beforeUpdate');
            console.log(document.getElementById('app').innerHTML);
        },
        updated() {
            console.log('updated');
            console.log(document.getElementById('app').innerHTML);
        },
        beforeUnmount() {
            console.log('beforeUnmount');
            console.log(document.getElementById('app').innerHTML);
        },
        unmounted() {
            console.log('unmounted');
            console.log(document.getElementById('app').innerHTML);
        },
        template: '<h1>{{message}}</h1>' +
            '<button v-on:click="messageBtnClick">文字按钮</button>'
    });
    const vm = app.mount("#app");
    console.log(vm);
</script>
</html>