1.mounted：模版初次渲染完成后执行
当模版初次渲染成功后会自动执行这个函数，可以用来请求数据或者初始化某个插件
<p v-show="isShow">生命周期</p>
<script>
new Vue({
el:"#app",
data:{},
mounted() {
console.log('mounted')
}
})
</script>
2.updated 页面更新时触发
当页面发生改变时，该页面所在的组件就会触发updated
// 父组件
<template>
<div id="app">
<h1>{{msg}}</h1>
<!-- 当content发生变化时，父组件和组件的updated函数都会触发 -->
<Hello :content="content" />
<button @click="test">点我</button>
</div>
</template>
// 子组件
<template>
<div id="hello">
<--name是子组件私有的数据-->
<h3>{{name}}</h3>
<--content就是通过props接收的数据-->
<h3>{{content}}</h3>
</div>
</template>
上面的例子中，如果修改子组件的name，只会触发子组件的updated。
而修改父组件的content，父组件和子组件的updated都会触发（父组件绑定了content到子组件中标签中，而子组件将content绑定到了h3标签中，两者的页面都对这个数据进行了绑定绑定）
3.beforeDestroy/destroyed：vue实例销毁执行的钩子函数
<div id="app">
<p>{{msg}}</p>
<button @click="destroyVM">点我销毁实例</button>
</div>
var vm = new Vue({
el: "#app",
data: {
msg: "销毁实例"
},
beforeDestroy() {
alert('实例将要被销毁')
//可以在这个函数里面清除实例中的定时器
},
destroyed() {
alert('实例被销毁了')
},
methods: {
destroyVM() {
//销毁实例的方法
this.$destroy();
}
}
})
实例被销毁后界面仍然存在，只是vm已经不能渲染界面了
4. $nextTick(callback)
作用：将回调延迟到DOM 更新循环之后执行
实际运用场景：有些插件需要在页面渲染完毕之后对页面进行初始化操作，而有时候页面渲染是基于ajax异步获取的数据，因为无法得知数据何时获取回来，也无法得知数据渲染到页面所用的时间，所以无法得知页面何时渲染完毕，初始化函数就难以在合适的时机执行（例如swipe插件的初始化操作）
解决办法1：ajax获取数据成功后会将数据保存到本地数据中（data或者vuex），使用watch监听这个数据的变化，触发对应的回调方法，再使用setTimeout()延迟运行页面初始化的方法
解决办法2：前面的与方法一类似，监听数据的变化，但是不使用延时定时器，而使用$nextTick(cb)。它表示页面更新之后再执行$nextTick(cb)里面的回调函数，只要将插件的初始化方法写在回到函数中即可。
实例：使用watch监听content，点击按钮，通过延时定时器模拟ajax数据，并修改content的值
<body>
<div id="app">
<p>{{msg}}</p>
<button @click="getMsg">点我模拟ajax数据</button>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "我是默认的数据",
sendTime:null,
receiveTime:null,
renderTime:null
},
methods: {
getMsg() {
//返回 1970 年 1 月 1 日至今的毫秒数
this.sendTime = new Date().getTime()
//使用延时定时器模拟ajax
setTimeout(() => {
console.log('开始发起请求的时间 ' + this.sendTime)
this.msg = "数据被延时修改了"
},1000)
}
},
watch:{
msg:function(){
this.receiveTime = new Date().getTime()
var delay = this.receiveTime-this.sendTime
console.log('接收到数据用时 ' + delay + 'ms')
this.$nextTick(function(){
this.renderTime = new Date().getTime()
var delay = this.renderTime-this.receiveTime
console.log('页面渲染用时 ' + delay + 'ms')
console.log('现在可以在此执行初始化函数')
})
}
}
})
</script>
点击按钮运行：
开始发起请求的时间 1573393003970 接收到数据用时 1003ms 页面渲染用时 2ms 现在可以在此执行初始化函数