转载自：https://blog.csdn.net/gao_xu_520/article/details/80915400
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gao_xu_520/article/details/80915400
一.概念了解
1.什么是生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。
2.对生命周期图的标注
二.了解
(1).beforeCreate
官方说明：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
解释：这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；
beforeCreate() {
console.log(this.page); // undefined
console.log{this.showPage); // undefined
},
data() {
return {
page: 123
}
},
methods: {
showPage() {
console.log(this.page);
}
}
(2).created
官方说明：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
解释说明： 这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；
created() {
console.log(this.page); // 123
console.log{this.showPage); // ...
$('select').select2(); // jQuery插件需要操作相关dom，不会起作用
},
data() {
return {
page: 123
}
},
methods: {
showPage() {
console.log(this.page);
}
}
(3).beforeMounte
官方说明：在挂载开始之前被调用：相关的 render 函数首次被调用。
(4).mounted
官方说明：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
解释说明：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行
mounted() {
$('select').select2(); // jQuery插件可以正常使用
},
可以简单的理解为：就是渲染dom节点的时候使用
三.案例
1.路由
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
import catetory from '@/components/catetory'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/index',
component: index,
children: [
{
path: ':catetoryId',
component: catetory
}
]
},
{
path:'*',
redirect :'/index'
}
]
})
2.组件
catetory.vue
<template>
<div class="wrapper">
教学平台
</div>
</template>
header.vue
<template>
<div id="header">
<header class="wrapper">
<div class="backsite fr">
<router-link to="/">首页</router-link>
<router-link to="/">返回首页</router-link>
</div>
<nav>
<ul>
<li class="active"><router-link to="/index">首页</router-link><span></span></li>
<li v-for="(item,index) in menuslist" >
<router-link v-if="!item.havesub" :to="'/index/'+item.link">{{item.name}}</router-link>
<a v-else href="javascript:void(0)">{{item.name}}</a>
<span></span>
<ul v-if="item.havesub" class="sub">
<li v-for="(sub,index) in item.sub"><router-link :to="'/index/'+item.link+'/'+sub.subLink">{{sub.subName}}</router-link></li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
</template>
<script>
import { menusList} from '../api/api'
const isOk = 0;
export default {
data () {
return {
activeIndex:0,//选中的li
menuslist:[]//菜单
}
},
created() {
this._nav();
},
methods: {
_nav(){
menusList().then((res)=>{
if(res.data.status == isOk){
this.menuslist = res.data.data;
}
})
}
}
}
</script>
index.vue
注意是：
<template>
<div id="index">
<v-header></v-header>
<div class="indexcnt" v-if="content">
<div class="wrapper">
首页内容
</div>
</div>
<router-view></router-view>
</div>
</template>
<script>
import vheader from './header'
import { carouselBannner} from '../api/api'
const isOk = 0;
export default {
components: {
'v-header':vheader
},
//业务逻辑代码
computed: {
content : function(){
return this.$store.state.content
}
},
mounted() {
//刷新的时候也不会改变
if(this.$route.path != '/index'){
this.$store.dispatch('pageContentHide');
}else{
this.$store.dispatch('pageContentShow');
}
},
watch:{
//时时监听路由的改变
$route : function(to,from){
//this.$store.dispatch('pageNumberReset'); //当路由改变时，将文章列表当前第几页的信息重置为第1页
if(to.path != '/index'){
this.$store.dispatch('pageContentHide');
}else{
this.$store.dispatch('pageContentShow');
}
}
}
}
</script>
3.state项目管理状态改变
store.js
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'
const state = {
content : true//是否显示首页内容
}
Vue.use(Vuex);
export default new Vuex.Store({
state,
actions,
getters,
mutations
})
mutations.js
/*
*mutations:状态改变操作方法。是vuex修改state的唯一推荐方法，
*/
import * as types from './types'
export default {
//对state进行操作
[types.PAGE_CONTENT_HIDE]:(state) =>{
state.content = false;
},
[types.PAGE_CONTENT_SHOW]:(state)=>{
state.content = true;
}
}
types.js
export const PAGE_CONTENT_HIDE = 'PAGE_CONTENT_HIDE'
export const PAGE_CONTENT_SHOW = 'PAGE_CONTENT_SHOW'
action.js
import * as types from './types'
export default {
pageContentHide : ({commit}) => {
commit(types.PAGE_CONTENT_HIDE);
},
pageContentShow : ({commit}) => {
commit(types.PAGE_CONTENT_SHOW);
}
}
加入mounted，帅新后，还是保持这当前的内容
---------------------
作者：面条请不要欺负汉堡
来源：CSDN
原文：https://blog.csdn.net/gao_xu_520/article/details/80915400
版权声明：本文为博主原创文章，转载请附上博文链接！