zoukankan      html  css  js  c++  java
  • Vue

    一:生命周期图

    1.官网原图

    3.我理解的图

    二:生命周期

    create

    let vm = new Vue()
    

    mount

    挂载,把div挂载到组件中

    update

    let vm = new Vue({
        el: '#box',
        data: {
            isShow: true	// 修改这个内容
        },
        methods: {
            handleClick() {
                console.log('我是根组件')
            }
        }
    })
    

    1.bedoreCreate

    2.created

    3.beforeMount

    4.mounted(用得最多)

    这时候可以向后端发送数据了

    5.beforeUpdate

    6.updated

    7.beforeDestroy

    8.destroyed

    组件销毁 - 给组件写一个定时器

    setTimeout()	// 延迟3s干什么事
    setInterval()	// 延迟3s干什么事
    

    测试代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>生命周期</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <child v-if="isShow"></child>
        <br>
        <button @click="terminate">删除子组件</button>
        <button @click="reborn">显示子组件</button>
    </div>
    </body>
    <script>
        Vue.component('child', {
            template: `
                <div>
                    {{name}}
                    <button @click="name='Darker1'">更新数据1</button>
                    <button @click="name='Darker2'">更新数据2</button>
                </div>`,
            data() {
                return {
                    name: 'Darker1',
                }
            },
            beforeCreate() {
                console.group('当前状态:beforeCreate')
                console.log('当前el状态:', this.$el)
                console.log('当前data状态:', this.$data)
                console.log('当前name状态:', this.name)
            },
            created() {
                console.group('当前状态:created')
                console.log('当前el状态:', this.$el)
                console.log('当前data状态:', this.$data)
                console.log('当前name状态:', this.name)
            },
            beforeMount() {
                console.group('当前状态:beforeMount')
                console.log('当前el状态:', this.$el)
                console.log('当前data状态:', this.$data)
                console.log('当前name状态:', this.name)
            },
            mounted() {
                console.group('当前状态:mounted')
                console.log('当前el状态:', this.$el)
                console.log('当前data状态:', this.$data)
                console.log('当前name状态:', this.name)
            },
            beforeUpdate() {
                console.group('当前状态:beforeUpdate')
                console.log('当前el状态:', this.$el)
                console.log('当前data状态:', this.$data)
                console.log('当前name状态:', this.name)
            },
            updated() {
                console.group('当前状态:updated')
                console.log('当前el状态:', this.$el)
                console.log('当前data状态:', this.$data)
                console.log('当前name状态:', this.name)
            },
            beforeDestroy() {
                console.group('当前状态:beforeDestroy')
                console.log('当前el状态:', this.$el)
                console.log('当前data状态:', this.$data)
                console.log('当前name状态:', this.name)
            },
            destroyed() {
                console.group('当前状态:destroyed')
                console.log('当前el状态:', this.$el)
                console.log('当前data状态:', this.$data)
                console.log('当前name状态:', this.name)
            },
    
    
        })
        let vm = new Vue({
            el: '#box',
            data: {
                isShow: true
            },
            methods: {
                terminate() {
                    this.isShow = false
                },
                reborn() {
                    this.isShow = true
                }
            }
        })
    </script>
    </html>
    
  • 相关阅读:
    windows开启PostgreSQL数据库远程访问
    Git使用介绍
    linux 常用工具记录及简介
    ubuntu18 安装坑点记录(华硕飞行堡垒)
    快手自动视频随机点赞脚本
    接触手机脚本编程------基于触动精灵的lua编程
    使电脑蜂鸣器发声小脚本
    tensorflow--非线性回归
    python笔记--------numpy
    python笔记--------二
  • 原文地址:https://www.cnblogs.com/xuexianqi/p/14157182.html
Copyright © 2011-2022 走看看