1.生命周期
- created：通常在此阶段发送ajax请求，这个生命周期里面就可以获得data里面的数据了
- mounted：mounted 阶段，一般是用于发起后端请求，获取数据，配合路由钩子做一些事情。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 3.使用子组件 -->
<App></App>
</div>
<script src="./vue.js"></script>
<script>
/*
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated 激活
deactivated 停用
配合keep-alive
beforeDestroy
destroyed
*/
Vue.component('Test', {
data() {
return {
msg: "小马哥",
isRed:false
}
},
methods: {
handlerClick() {
this.msg = 'alex';
this.isRed = true;
}
},
template: `
<div>
<button @click='handlerClick'>改变</button>
<h3 :class='{active:isRed}'>{{msg}}</h3>
</div>
`,
beforeCreate() {
console.log('组件创建之前', this.$data);//什么数据都拿不到哈
},
created() {
// 非常重要的事情,在此时发送ajax 请求后端的数据
console.log('组件创建完成', this.$data);//这个时候能够拿到数据了
},
beforeMount() {
// 即将挂载---app内无内容
console.log('DOM挂载之前', document.getElementById('app'));
},
mounted() {
// 发送ajax---app内由内容
console.log('DOM挂载完成', document.getElementById('app'));
},
beforeUpdate() {
// 获取更新之前的DOM
console.log('更新之前的DOM', document.getElementById('app').innerHTML);
},
updated() {
// 获取最新的DOM
console.log('更新之后的DOM', document.getElementById('app').innerHTML);
},
beforeDestroy() {
console.log('销毁之前');
},
destroyed() {
console.log('销毁完成');
},
activated(){
console.log('组件被激活了');
},
deactivated(){
console.log('组件被停用了');
}
})
const App = {
data() {
return {
isShow: true
}
},
components: {},
methods: {
clickHandler() {
this.isShow = !this.isShow;
}
},
template: `
<div>
<keep-alive>
<Test v-if='isShow'></Test>
</keep-alive>
<button @click='clickHandler'>改变生死</button>
</div>
`,
}
new Vue({
el: '#app',
data: {
},
components: {
App
}
})
</script>
</body>
</html>
2.问题：vue使用this.$refs.xx在mounted中获取DOM元素为undefined？
1.原因：（mounted需要注意的是加载数据，并不就是更新到dom中去）
如果在 DOM 结构中的某个 DOM 节点使用了 v-if、v-show 或者 v-for（即根据获取到的后台数据来动态操作 DOM，即响应式），那么这些 DOM 是不会在 mounted 阶段找到的。
mounted 阶段，一般是用于发起后端请求，获取数据，配合路由钩子做一些事情。简单来说就是在 mounted 钩子中加载数据而已，加载回来的数据是不会在这个阶段更新到 DOM 中的。所以在 mounted 钩子中使用 $refs。
-
<u>如果 ref 是定位在有 v-if、v-for、v-show 的 DOM 节点中，返回来的只能是 undefined，因为在 mounted 阶段他们根本不存在。</u> -
如果说 mounted 阶段是加载阶段，那么 updated 阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理)，此时，再使用 this.$refs.xx，就 100% 能找到该 DOM 节点。
updated 与 mounted 不同的是，在每一次的 DOM 结构更新，Vue.js 都会调用一次 updated 钩子函数！而 mounted 钩子函数仅仅只执行一次而已。
2.解决：使用$nextTick
-
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
-
nextTick，则可以在回调中获取更新后的 DOM。
