Vue学习(10)生命周期

最新推荐文章于 2024-03-08 13:19:26 发布

ssqsssq

最新推荐文章于 2024-03-08 13:19:26 发布

阅读量196

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43778744/article/details/105276655

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!--
 * @Author: your name
 * @Date: 2020-04-02 17:20:30
 * @LastEditTime: 2020-04-02 18:44:27
 * @LastEditors: Please set LastEditors
 * @Description: 组件的生命周期
 * @FilePath: \x\13.html
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <App> </App>
    </div>
    <script text="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <script type="text/javascript">
        // beforeCreate
        // created
        // beforeMount
        // mounted
        // beforeUpdate
        // updated
        // activated
        // deactivated
        // beforeDestroy
        // destroyed
        // errorCaptured
        Vue.component("Test", {
            template: '<div>\
            <div>{{ msg }}</div>\
            <button @click="changeHandler">change</button>\
            </div>',
            data() {
                return {
                    msg: "Hello World"
                }
            },
            methods: {
                changeHandler() {
                    this.msg = this.msg + 'gg';
                }
            },
            beforeCreate() {
                // 组件创建之前
                console.log(this)
            },
            created() {
                // 组件创建之后
                console.log(this.msg)
                // 使用该组件，就会调用created方法
                // 在created这个方法中可以操作后端数据，数据驱动视图
                // 应用：发起ajax请求
            },
            beforeMount() {
                // 挂载数据到dom之前
                console.log(document.getElementById('app'))
            },
            mounted() {
                // 挂载数据到dom之后，Vue作用以后的Dom
                console.log(document.getElementById('app'))
                // 操作Dom
            },
            beforeUpdate() {
                // 在更新dom之前调用该钩子，应用：获取原始dom
                console.log(document.getElementById('app').innerHTML)
            },
            updated() {
                // 在更新dom之后调用该钩子，应用：获取最新dom
                console.log(document.getElementById('app').innerHTML)
            },
            beforeDestroy() {
                console.log('bdf');
            },
            destroyed() {
                console.log('after');
            },
            activated() {
                console.log('active');
            },
            deactivated() {
                console.log('stop');
            },
        })
        var App = {
            data() {
                return {
                    isShow: true
                }
            },
            // Vue 内置组件<keep-alive></keep-alive>
            // 能将切换过程中将状态保留在内存里，防止重复渲染
            template: '\
            <div class="app">\
            <keep-alive>\
            <Test v-if="isShow"/>\
            </keep-alive>\
            <button @click="isShow=!isShow">changeLife</button></div>\
            '
        }

        new Vue({
            el: '#app',
            data() {
                return {        

                }
            },
            // template: '\
            // <App />\
            // ',
            components: {
                App
            }
        })
    </script>
</body>

</html>

kepp-alive

vue内置组件，可以将状态保留在内存中，在切换时不需要重复渲染，减少消耗

<keep-alive></keep-alive>

ssqsssq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习(10)生命周期

&lt...
复制链接

扫一扫