vue的生命周期

*vue2生命周期图示

本文整理主要参考bilibili李南江的视频，视频链接【快速了解Vue生命周期-哔哩哔哩】https://b23.tv/lTJHsU

1.一旦进入组件或进入页面,会执行beforecreate,created,beforeMount,mounted这四个生命周期，然后监听数据，随着数据的变化执行beforeUpdate和updated这两个生命周期

*创建阶段的生命周期方法

*beforeCreate和created

1.beforeCreate():在调用beforeCreate的时候，仅仅表示Vue实例刚刚被创建出来，此时此刻还没有初始化好，所以此时此刻不能访问vue实例中保存的数据和方法；

2.created():created中已经可以访问vue实例中的数据和方法，最早能访问数据的生命周期函数

<div id="app">
        <p >
            <span>{{msg}}</span>
        </p>
</div>
<script src="./vue.js"></script>
<script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'dgasdg',
            },
            beforeCreate() {
                console.log(this.msg)//输出undefined
            },
			created() {
                console.log(this.msg)//输出dgasdg
            }
			
        })
</script>

*beforeMount和mounted

1.beforeMount():此时已经编译好了模板，但是还没有将模板渲染到页面上

2.mounted():编译好的初始模板已经挂载到页面上，可以通过DOM获取到编译好的模板了，可以拿页面上最终渲染的内容了,最早可以使用this.$refs的函数，mounted 不会保证所有的子组件也都一起被挂载，如果希望等到整个视图都渲染完毕，可以在mounted内部使用 vm.$nextTick，只调用一次

 <div id="app">
        <p v-if='show'>
            <span>{{msg}}</span>
        </p>
</div>
<script src="./vue.js"></script>
<script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'dgasdg',
				show:true
            },
            beforeMount() {
                console.log(document.querySelector('p')) //输出<p v-if='show'><span>{{msg}}</span></p>
            },
            mounted() {
                console.log(document.querySelector('p'))  //输出<p><span>dgasdg</span></p>
            }
        })
</script>

goole页面显示如下：

*运行阶段生命周期方法

*beforeUpadte 和update

参考链接 https://blog.csdn.net/wq_ocean_/article/details/108918689

1.beforeUpdate():是针对视图层的，只有页面中渲染的数据发生改变或者渲染，才会触发这个生命周期函数；这个函数触发时表示数据发生了改变，data中的数据时最新的数据，但是页面中还是旧数据；这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

2.upadated():中表示组件DOM已经同步跟新完毕，但是不会保证所有的子组件也都一起被重绘。如果希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick

<div id="app">
  <button @click='changeNum'>按钮</button>
    <p>
       <span :class="spanclass">
           {{num}}
       </span>
     </p>
</div>
<script src="./vue.js"></script>
<script>
   var vm = new Vue({
        el: '#app',
        data: {
            num: 'data中的num',
            spanclass: 'oldclass'
         },
        methods: {
            changeNum() {
              this.num = '点击了按钮'
              this.spanclass = 'newclass'
             }
        },
        beforeUpdate() {
             console.log(this.spanclass)  //输出 newclass
             console.log(document.querySelector('span').className)  //输出oldclass
		},
		 updated() {
             console.log(this.spanclass)  //输出 newclass
             console.log(document.querySelector('span').className)  //输出 newclass
        }

    }
</script>

*销毁阶段的生命周期方法

*beforeDestory和destoryed

*keep-alive

keep-alive 是用来缓存组件的，提高性能，使用了keep-alive会多出两个生命周期 activated deactivated，每次进入组件，每次都会执行一个生命周期，activated，A页面传参并跳转到B页面，在B页面接收参数可以写在activated 里面，这样就可以正常接收到新数据