vue-组件生命周期

最新推荐文章于 2024-07-30 23:19:55 发布

@Tiramisu

最新推荐文章于 2024-07-30 23:19:55 发布

阅读量63

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105037600

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

生命周期各个阶段

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="data in datalist" :key="data.filmId">
                <h3>{{data.name}}</h3>
                <img :src="data.poster" />
            </li>
        </ul>
        <child v-if="isCreated"></child>
    </div>

    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        Vue.component("child", {
            template: `<div id="aaa">
             child --{{title}}
            <button @click="title='1111111'">change1</button>
            <button @click="title='2222222'">change2</button>
        </div>`,
            data() {
                return {
                    title: "00000",
                    datalist: [],
                    count: 0
                }
            },

            methods: {
            },

            beforeCreate() {
                console.log("beforeCreate")
            },
            created() {
                console.log("created")
            },

            beforeMount() {
                console.log("beforeMount")
            },

            mounted() {
                console.log("mounted", "访问dom,setInterval,window.onscroll, 监听事件 ajax")
            },

            beforeUpdate() {
                console.log("beforeUpdate")
            },

            updated() {
                console.log("updated", "更新之后可以访问dom")
            },

            beforeDestroy() {
                console.log("beforeDestroy-clearInterval ,window.οnscrοll=null,$off");
            },

            destroyed() {
                console.log("destroyed--clearInterval ,window.οnscrοll=null,$off")
            }
        })
        var vm = new Vue({
            el: "#box",
            data: {
                isCreated: true,
                datalist: []
            },
        })
    </script>
</body>
</html>

vm.isCreated
true
vm.isCreated=false
组件生命周期.html:61 beforeDestroy-clearInterval ,window.onscroll=null,$off
组件生命周期.html:65 destroyed--clearInterval ,window.onscroll=null,$off
false