vue的生命周期
一.概念了解javascript
1.什么是生命周期
Vue实例有一个完整的生命周期，也就是从开始建立、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，咱们称这是Vue的生命周期。通俗说就是Vue实例从建立到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，能够让咱们在事件触发时注册js方法，能够让咱们用本身注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。html
2.对生命周期图的标注vue
二.了解java
(1).beforeCreate
官方说明：在实例初始化以后，数据观测(data observer) 和 event/watcher 事件配置以前被调用。vue-router
解释：这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能得到到；vuex
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 属性目前不可见。api
解释说明： 这个时候能够操做vue实例中的数据和各类方法，可是还不能对"dom"节点进行操做；app
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节点被渲染到文档内，一些须要dom的操做在此时才能正常进行ide
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，帅新后，仍是保持这当前的内容