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>
    
  • 相关阅读:
    深入浅出ES6(十二):代理 Proxies
    深入浅出ES6(十一):生成器 Generators,续篇
    深入浅出ES6(十):集合
    深入浅出ES6(九):学习Babel和Broccoli,马上就用ES6
    深入浅出ES6(八):Symbols
    根据后端返回的数据进行中文排序操作
    vue之组件(组件之间相互传参)
    mongodb用户权限增删改查
    mongodb添加文件和导出文件
    js中cookie编码解码操作
  • 原文地址:https://www.cnblogs.com/xuexianqi/p/14157182.html
Copyright © 2011-2022 走看看