项目运行流程
在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>