Vue3.0学习笔记-vm和生命周期函数

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>

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页