Vue 的生命周期函数

Vue 的生命周期函数有: beforeCreate、createed、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

• beforeCreate(创建之前):实例刚刚被创建出来,还无法访问 data 和 methods

    data() {
        return {
            test: '我是Vue.js'
        }
    },
    methods() {
        testFn() {
            console.log('方法：testFn');
        }
    },
    beforeMount() {
        console.log('App:beforeMount', this.test, this.testFn );
        // App:beforeMount undefined undefined
    }

• created(创建之后)：可以访问 data 和 methods,但是无法访问DOM节点

    data() {
        return {
            test: '我是Vue.js'
        }
    },
    methods() {
        testFn() {
            console.log('方法：testFn');
        }
    },
    mounted() {
        console.log('App:mounted', this.test, this.testFn );
        // App:beforeMount 我是Vue.js undefined
        // 为什么这里的 this.testFn 还是一个undefined，因为执行一个函数，默认是
        返回 return，如果没有 return，默认 return 为 undefined
    }

• beforeMount(挂载之前): 模板已经编译完成了,还没有挂载到对应的DOM节点上

    data() {
        return {
            test: '我是Vue.js'
        }
    },
    methods() {
        testFn() {
            console.log('方法：testFn');
        }
    },
    beforeMount() {
        console.log('App:beforeMount','模板编译完成，但是还没有挂载到对应的节点上');
        console.log(document.getElementById('img')); // null
    }

• mounted(挂载之后)：挂载完成,可以访问页面上的DOM节点

    data() {
        return {
            test: '我是Vue.js'
        }
    },
    methods() {
        testFn() {
            console.log('方法：testFn');
        }
    },
    mounted() {
        console.log('App:mounted','挂载完成');
        console.log(document.getElementById('img')); // 输出对应的节点
    }

• beforeUpdate(更新之前)：页面数据发生改变的时候触发,虽然已经获取到最新的数据,但是视图上显示的数据还是久的

    data() {
        return {
            test: '我是Vue.js',
            count: 1,
        }
    },
    methods() {
        testFn() {
            console.log('方法：testFn');
        }
    },
    beforeUpdate() {
        console.log('更新之前', this.count, document.getElementById("count").innerText;);
    }

• updated(更新之后)：当页面数据发生改变的时候出发，但是获取的值还是更新之前的旧数据

    data() {
        return {
            test: '我是Vue.js',
            count: 1,
        }
    },
    methods() {
        testFn() {
            console.log('方法：testFn');
        }
    },
    updated() {
        console.log('更新之后', this.count, document.getElementById("count").innerText;);
    }

• beforeDestroy(销毁之前)：当有节点被删除时触发,可以访问 data 和 methods

    data() {
        return {
            test: '我是Vue.js'
        }
    },
    methods() {
        testFn() {
            console.log('方法：testFn');
        }
    },
    beforeDestroy() {
        console.log('App:beforeDestroy','销毁之前');
    }

• destroyed(销毁之后)：当有节点被删除时触发,实例已经被回收

    data() {
        return {
            test: '我是Vue.js'
        }
    },
    methods() {
        testFn() {
            console.log('方法：testFn');
        }
    },
    Destroyed() {
        console.log('App:Destroyed','销毁之后');
    }

这里再跟大家讲一个两个特殊的生命周期函数，这两个生命周期函数并不是随随便便就可以使用的，需要使用 <keep-alive></keep-alive> 标签才可以使用

• 首先先来讲解一下 <keep-alive></keep-alive>

  • 是一个 Vue 提供的抽象组件，可以用来缓存数据，由于是一个抽象组件，所以渲染页面的时候不会被渲染成为一个DOM元素。
  • <keep-alive></keep-alive> 不会销毁我们的组件，而是将组件缓存起来。

• activated(): keep-alive 处于激活状态

    data() {
        return {
            test: '我是Vue.js'
        }
    },
    methods() {
        testFn() {
            console.log('方法：testFn');
        }
    },
    activated() {
        console.log('keep-alive','处于激活状态');
    }

• deactivated(): keep-alive 处于假死状态

    data() {
        return {
            test: '我是Vue.js'
        }
    },
    methods() {
        testFn() {
            console.log('方法：testFn');
        }
    },
    deactivated() {
        console.log('keep-alive','处于假死状态');
    }

• activated 和 deactivated 是基于 <keep-alive> 使用的，如果你使用 <keep-alive> 的话,它只会执行 activated 和 deactivated 生命周期函数，而不会执行 beforeDestroy 和 destroyed。
• 建议如果使用 activated 和 deactivated 的话，将需要销毁的数据或结构放到 deactivated 中去。

mixin 混入

• 混入(mixin)使用了一种非常灵活的方式，来分布Vue组件中的可复用功能。

• 混入(mixin)有两种方式：全局混入、局部混入。

• 什么时候需要使用混入(mixin)呢？

  • 当页面的风格不同，所要执行的方法和所需的数据类似时。

• 我们通常会将具有相同共性的功能封装到 mixin 中

全局混入

• 在实例Vue中通过 Vue.mixin 方法创建出来的都是全局混入，使用全局混入时需谨慎使用，一旦使用全局混入，将会影响后面创建的所有实例 Vue。

    Vue.mixin({
        methods() {
            test() {
                console.log('=======test=======');
            }
        }
        created() {
            console.log('这是全局混入');
        }
    })

局部混入

• 定义在实例Vue中的混入，我们称之为局部混入，我们通常会将混入抽离出来，然后谁需要谁就去调用。

// ES6 语法导出模块
// 在js文件中写好我们抽离出来的具有相同功能的代码块
    export default {
    methods: {
        test() {
            console.log('------test-------');
        }
    },
    created() {
        this.timer = setInterval(() => {
            console.log('定时器');
        }, 1000);
        this.test();
    },
    beforeDestroy() {
        // clearInterval(this.timer); 
        // 销毁之前
        // 通常我们的销毁生命周期就可以用来清除定时器
    },
    deactivated() {
        clearInterval(this.timer);
        console.log('keep-alive,组件处于假死状态');
    }
}

// 谁需要使用就引入js文件，并且在实例中定义一个 `mixins` 来接收，`mixins` 是一个数组,可以引入多个,但需慎用
    import testMixin from '../mixins/test.js';
    export default {
        data() {
            return {
                timer: null,
                bool: true,
            }
        },
        mixins:[testMixin],
    }

注意

• 在使用 mixin 的时候,如果 mixin 封装的代码中有 created 生命周期函数,而我们在外部也写入一个 created 生命周期函数，会出现什么效果呢？

  • 两个 created 并不会相互覆盖,而是两者中的代码都会执行,所以我们可以将具有共性的代码使用 mixin 封装,然后从外部引入,而不相同的代码直接写在内部

• mixin 文件

    export default {
        created() {
            console.log('-----test------');
        }
    }

• 引用文件

    import testMixin form '../mixins/test.js';
    export default {
        mixins: [testMixin],
        created() {
            console.log('======test======');
        }
    }