目录
VUE.3x
1. 组件运行的过程
组件的生命周期指的是：组件从创建 -> 运行（渲染） -> 销毁的整个过程，强调的是一个时间段。
2. 如何监听组件的不同时刻
vue 框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而自动调用。例如：
① 当组件在内存中被创建完毕之后，会自动调用 created 函数
② 当组件被成功的渲染到页面上之后，会自动调用mounted 函数
③ 当组件被销毁完毕之后，会自动调用 unmounted 函数
3. 如何监听组件的更新
当组件的data 数据更新之后，vue 会自动重新渲染组件的 DOM 结构，从而保证View 视图展示的数据和
Model 数据源保持一致。
当组件被重新渲染完毕之后，会自动调用 updated 生命周期函数。
4. 组件中主要的生命周期函数
注意：在实际开发中，created 是最常用的生命周期函数！
5. 组件中全部的生命周期函数
6. 完整的生命周期图示
可以参考vue 官方文档给出的“生命周期图示”，进一步理解组件生命周期执行的过程：
https://www.vue3js.cn/docs/zh/guide/instance.html#生命周期图示
VUE.2x
6. 生命周期 & 生命周期函数
生命周期（Life Cycle）是指一个组件从创建 -> 运行-> 销毁的整个阶段，强调的是一个时间段。
生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。
7. 组件生命周期函数的分类
组件生命周期函数共有三个阶段：
组件生命周期的第 1 个阶段：组件创建阶段
组件生命周期的第 2 个阶段：组件运行阶段
组件生命周期的第 3 个阶段：组件销毁阶段
图中每一个小框都是一个生命周期函数；
开发中，最常用的是：created 生命周期函数，mounted生命周期函数，updated生命周期函数
1、created 生命周期函数，非常常用; 经常在它里面，调用methods中的方法，请求服务器的数据（发AJAX请求）; 并且，把请求到的数据，转存到data中，供template模板渲染的时候使用！
2、mounted生命周期函数，也非常重要。如果要操作当前组件的DOM，最早只能在mounted阶段执行；经常在这个函数中操作DOM元素
3、当数据变化之后，为了能够操作到最新的DOM结构，必须把代码写到updated生命周期函数中
8. 生命周期图示
可以参考 vue 官方文档给出的“生命周期图示”，进一步理解组件生命周期执行的过程：
Vue官网，在Vue实例里查阅（生命周期图示）
https://cn.vuejs.org/v2/guide/instance.html
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
1、created 生命周期函数，非常常用; 经常在它里面，调用methods中的方法，请求服务器的数据（发AJAX请求）; 并且，把请求到的数据，转存到data中，供template模板渲染的时候使用！
2、mounted生命周期函数，也非常重要。如果要操作当前组件的DOM，最早只能在mounted阶段执行；经常在这个函数中操作DOM元素
3、当数据变化之后，为了能够操作到最新的DOM结构，必须把代码写到updated生命周期函数中
9、代码示例
这里提供有关 生命周期 & 生命周期函数的组件示例代码，无关的组件（Left,Right组件忽略）
main.js部分
import Vue from 'vue'
import App from './App.vue'
// 导入需要被全局注册的那个组件
import Count from '@/components/'
Vue.component('MyCount', Count)
Vue.config.productionTip = false
new Vue({
// render 函数中，渲染的是哪个 .vue 组件，那么这个组件就叫做 “根组件”
render: h => h(App)
}).$mount('#app')
App.vue部分：
<template>
<div class="app-container">
<h1>App 根组件</h1>
<button @click="flag = !flag">Toggle Flag</button>
<Test info="你好" v-if="flag"></Test>
<hr />
<div class="box">
<!-- 渲染 Left 组件和 Right 组件 -->
<!-- 3. 以标签形式，使用注册好的组件 -->
<Left></Left>
<Right></Right>
</div>
</div>
</template>
<script>
// 1. 导入需要使用的 .vue 组件
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
import Test from '@/components/Test.vue'
export default {
data() {
return {
flag: true
}
},
// 2. 注册组件
components: {
Left,
Right,
Test
}
}
</script>
<style lang="less">
.app-container {
padding: 1px 20px 20px;
background-color: #efefef;
}
.box {
display: flex;
}
</style>
Test.vue部分：
<template>
<div class="test-container">
<h3 id="myh3">Test.vue 组件 --- {{ books.length }} 本图书</h3>
<p id="pppp">message 的值是：{{ message }}</p>
<button @click="message += '~'">修改 message 的值</button>
</div>
</template>
<script>
export default {
props: ['info'],
data() {
return {
message: 'hello vue.js',
// 定义 books 数组，存储的是所有图书的列表数据。默认为空数组！
books: []
}
},
watch: {
message(newVal) {
console.log('监视到了 message 的变化：' + newVal)
}
},
methods: {
show() {
console.log('调用了 Test 组件的 show 方法！')
},
// 使用 Ajax 请求图书列表的数据
initBookList() {
const xhr = new XMLHttpRequest()
xhr.addEventListener('load', () => {
const result = JSON.parse(xhr.responseText)
console.log(result)
this.books = result.data
})
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
xhr.send()
}
},
// 创建阶段的第1个生命周期函数
beforeCreate() {
// console.log(this.info)
// console.log(this.message)
// this.show()
},
created() {
// created 生命周期函数，非常常用。
// 经常在它里面，调用 methods 中的方法，请求服务器的数据（发AJAX请求）。
// 并且，把请求到的数据，转存到 data 中，供 template 模板渲染的时候使用！
this.initBookList()
},
beforeMount() {
// console.log('beforeMount')
// const dom = document.querySelector('#myh3')
// console.log(dom)
},
// 如果要操作当前组件的 DOM，最早，只能在 mounted 阶段执行
mounted() {
// console.log(this.$el)
// const dom = document.querySelector('#myh3')
// console.log(dom)
},
beforeUpdate() {
// console.log('beforeUpdate')
// console.log(this.message)
// const dom = document.querySelector('#pppp')
// console.log(dom.innerHTML)
},
// 当数据变化之后，为了能够操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中
updated() {
// console.log('updated')
// console.log(this.message)
// const dom = document.querySelector('#pppp')
// console.log(dom.innerHTML)
},
beforeDestroy() {
console.log('beforeDestroy')
this.message = 'aaa'
console.log(this.message)
},
destroyed() {
console.log('destroyed')
// this.message = 'aaa'
}
}
</script>
<style lang="less" scoped>
.test-container {
background-color: pink;
height: 200px;
}
</style>