vue生命周期

项目运行流程

在main.js里面导入了跟组件App 然后通过reder渲染出来

• package.json将.vue结尾的文件编译成js结尾

 "vue-template-compiler": "^2.6.14"

生命周期

• 一个组件从创建->运行->销毁的整个阶段，强调的是时间段
• 是vue的内置函数，随着组件的生命周期，自动按次序执行

组件生命周期分类

结合实例

• 第一次数据渲染成功是在 created 节点 只执行一次

• 第一次获取DOM结构是在 mounted 节点 只执行一次

• 数据跟新会触发 beforeUpdate update 会执行N次

<template>
  <div>
	<h1 id="pppp" v-if="show">这是Vue主页 {{username}}</h1>
	<button type="button" @click="show = !show">显示</button>
	<button type="button" @click="changeName()">修改数据</button>
	<Test class="test" init="9" v-if="show"> </Test>
	<div class="box">
		  <Left></Left>
	  </div>
	  <div class="box1">
		  <Right></Right>
	  </div>
  </div>
</template> 

<script>
import Left from "@/components/Left.vue"
import Right from "@/components/Right.vue"
import Test from "@/components/test.vue"
	export default{
		components:{
		Left,
		Right,
		Test
	},
	/**
	 * 1 new一个Vue实例对象
	 * 2 init Events & Lifecycle 组件的props/data/methods尚未被创建，都处于不可用状态 （初始化事件和生命周期函数）
	 * 3 beforeCreate
	 */
	beforeCreate() {
		console.log("this.username: ",this.username); //undefined
	},
	/**
	 * 4 init injections & reactivity 初始化props、data、methods
	 * 5 created 可以访问到data props methods，组件的模板结构尚未生成不能操作DOM (很重要 常常用来请求后台数据)
	 */
	created() {
		console.log("this.username: ",this.username); //孙少聪
		const dom = document.querySelector('#pppp');
		const dom1 = document.querySelector('Test');
		console.log(dom); //null
		console.log(dom1); // null
	},
	/**
	 * 6  "vue-template-compiler": "^2.6.14" 基于数据和模板在内存中编译生成HTML结构
	 * 7 beforeMount  将要渲染内存编译好的HTML结构，此时浏览器中还没有当前组建的DOM结构
	 */
	beforeMount() {
		const dom = document.querySelector('#pppp');
		const dom1 = document.querySelector('.test');
		console.log(dom); //null
		console.log(dom1); // null
	},
	/**
	 * 8 Create vm.$el and replace "el" with it 用内存中编译生成的HTML结构替换掉el属性指定的DOM元素
	 * 9 mounted 已经成功将内存的HTML结构，成功渲染到浏览器中，此时浏览器中已然包含了了当前组建的DOM结构
 	 */
	mounted() {
		const dom = document.querySelector('#pppp');
		const dom1 = document.querySelector('Test');
		console.log(dom); //<h1>这是Vue主页 张高义</h1>
		console.log(dom1); // null
	},
	/**
	 * 10 beforeUpdate 当修改了数据，将要根据最新的数据，重新渲染组件的模板结构 (点击之后这时数据最新的但是UI界面上面的还未更改)
	 */
	beforeUpdate() {
		console.log("将要修改数据了");
		console.log("this.username: ",this.username); //this.username:  张高义
		const dom1 = document.querySelector('#pppp');
		console.log("dom1: ",dom1.innerHTML); //dom1:  这是Vue主页 孙少聪
	},
	/**
	 * 11 Virtual DOM re-render and patch 根据最新的数据重新渲染组建的DOM结构
	 * 12 updated 已经根据最新的数据，完成了数据的渲染
	 */
	updated() {
		console.log("修改完数据了");
		console.log("this.username: ",this.username); //this.username:  张高义
		const dom1 = document.querySelector('#pppp');
		console.log("dom1: ",dom1.innerHTML); //dom1:  这是Vue主页 张高义
	},
	/**
	 * 13 beforeDestroy 将要销毁组件但是还没有销毁
	 */
	beforeDestroy() {
		console.log("销毁之前");
	},
	/**
	 * 14 Teardown watchers,child components and event lkisteners 销毁当前组建的数据侦听器 子组件 事件监听
	 * 15 destroyed 组件的DOM结构彻底被移除
	 */
	destroyed() {
		console.log("销毁之后");
	},
	data() {
		return {
			username : '孙少聪',
			show: true
		}
	},
	methods:{
		changeName(){
			this.username = '张高义'
			console.log("这是changeName方法")
		},
	}
}
</script>

<style>
.box{
	background-color: pink;
}
.box1{
	background-color: gray;
}
</style>