(二)、vue基础精讲之---vue实例的生命周期

作者: 读书的鱼 | 来源:发表于2018-12-16 21:22 被阅读0次

Vue
(二)、vue基础精讲之---vue实例的生命周期
vue生命周期
(一)、vue基础精讲之---vue实例
Day45/100 Vue的生命周期
Vue2.0基础-生命周期（二）
Vue.js入门（二）：生命周期
一、vue基础知识点
vue学习第二课之vue的生命周期
VUE实例生命周期钩子

生命周期函数就是vue实例在某个时间点会自动执行的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue生命周期</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <h2>常用的是8个生命周期函数</h2>
        <p>
            beforeCreate()
            created()
            beforeMount()
            mounted()
            beforeDestroy()
            destroyed()
            beforeUpdate()
            upDated()
        </p>
        <h2>不常用的还有三个</h2> 
        <p>
            activated() 
            deactivated()
            errorCaptured: (err, vm, info)
        </p>
    </div>

    <script>
       var vm = new Vue({
           el: '#app',
           data:{
               message: 'hello wolrd'
           },
           beforeCreate() {
               console.log('beforeCreate');
           },
           created() {
               console.log('created');
           },
           beforeMount() {
                console.log(this.$el);  // <div id="app"></div>
               console.log('beforeMount');
           },
           mounted() {
               console.log(this.$el);  // <div id="app">'hello wolrd</div>
               console.log('mounted');
           },
           beforeDestroy() {
               console.log('beforeDestroy'); //需要执行：vm.$destroy()函数才能出发
           },
           destroyed() {
               console.log('destroyed')；//需要执行：vm.$destroy()函数才能出发
           },
           beforeUpdate() {
               console.log('beforeUpdate');  //需要更改data数据，才能出发（this.message = 'bye world'）
           },
           updated() {
               console.log('updated');  //需要更改data数据，才能出发（this.message = 'bye world'）
           },
       }) 
    </script>
</body>
</html>