Vue.js--笔记三(生命周期钩子)

最新推荐文章于 2022-03-15 18:01:49 发布

zhengfu920227

最新推荐文章于 2022-03-15 18:01:49 发布

阅读量214

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/mianwan6227/article/details/106386320

版权

先上一张官网生命钩子图例

明确生命周期钩子的意义:同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。(官网照搬)

贴一段自己测试的示例

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <div id = "app">
            v-modelInput：<input v-model = "pre_value"/><br/>
            v-bindInput：<input :value = "pre_value"/><br/>
            v-onInput：<input @click = "pre_function" type = "button" value = "点击触发pre_function函数"/><br/>

            <input type = "button" value = "$销毁" onclick = "df()"/>
            <input type = "button" value = "$挂载" onclick = "mf()"/>
        </div>
    </body>
</html>
<script>

    var app_vm = new Vue({
            el: '#app',
            data : {
                pre_value : 'Hi Vue!',
            },
            methods : {
                pre_function : function (){window.alert('Hi pre_function~~')}
            },
            beforeCreate : () => {
                                    console.log('beforeCreate_process');
                                 },//创建实例前,
            created : () => {
                                console.log('created_process');
                            },//创建实例后
            beforeMount : () => {
                                    console.log('beforeMount_process');
                                },//挂载前
            mounted : () => {
                                console.log('mounted_process');
                            },//挂载后
            beforeUpdate : () => {
                                    console.log('beforeUpdate_process');
                                 },//数据修改前
            updated : () => {
                              console.log('updated_process');
                            },//数据修改后
            beforeDestroy : () => {
                                    console.log('beforeDestroy_process');
                                  },//vm对象销毁前
            destroyed : () => {
                                console.log('destroyed_process');
                              }//vm对象销毁后
        });
        //
        var df = () => {
                            app_vm.$destroy();
                        };//销毁
        var uf = () => {
                            app_vm.$forceUpdate();
                        };//强制更新
        var mf = () => {
                            app_vm.$mount();
                        };//挂载
</script>

页面刚初始化时候的控制台(证明触发了beforeCreate，created，beforeMount，mounted四个钩子)