生命周期
beforeCreate() {
// 一般会结合 混入 使用
},
created() {
// 可以使用 vue数据
// 一般可以用来做一些ajax的请求
},
mounted() {
console.log(this.$el === app);
// 可以获取到真实DOM元素 echarts swiper 百度地图
this.timer = setInterval(() => {
console.log('ok');
}, 1000)
},
beforeUpdate() {
console.log(beforeUpdate);
},
updated() {
console.log('');
},
// 销毁的钩子函数中 我们一般会做一些清除动作
// 组件销毁之后 是 切断数据的双向绑定
beforeDestroy() {
clearInterval(this.timer)
},
destroyed() {
},
nextTick原理
首先 nextTick是为了做出一个异步操作,这里利用了事件池,把用户传给nextTick的回调函数放 (实际是在用户的回调函数的基础上又套了一层函数) 到事件池中,放完之后,让pending变成true,让一个timerFunc函数执行,这个timerFunc函数 里面调用了一个异步(优先使用微任务 没有再用宏任务)函数,在异步函数中 执行了 flushCallbacks,flushCallbacks执行的时候 就是把pending 变成了 false;让事件池中所有函数挨个执行并且清空了 事件池;
pending的作用: 第一次执行nextTick的时候 吊起了异步(不管怎么底 都要等同步执行完成),也就是说下边的nextTick调用 不会再启用新的异步了 知识单纯的向 事件池中添加事件
子组件未使用就是一个普通对象 ,只有当组件使用的时候才会把这个对象中的配置转换成 对应的实例
父子组件生命周期执行顺序
加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
总结:
1.beforeCreate执行时:data和el均未初始化,值为undefined
2.created执行时:Vue 实例观察的数据对象data已经配置好,已经可以得到data的值,但Vue 实例使用的根 DOM 元素el还未初始化
3.beforeMount执行时:data和el均已经初始化,但此时el并没有渲染进数据,el的值为“虚拟”的元素节点
4.mounted执行时:此时el已经渲染完成并挂载到实例上
5.beforeUpdate和updated触发时,el中的数据都已经渲染完成,但只有updated钩子被调用时候,组件dom才被更新。
————————————————
Vuex
作用: 解决组件间的数据交互
<template>
<div>
{{ $store.state.count }}
{{ a }}
<!-- {{ $store }} -->
<button @click="add">+</button>
<button @click="minux">-</button>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
methods: {
// add() {
// this.$store.commit('add')
// },
// sub() {
// },
...mapMutations(['add', 'minux']) // 使用辅助函数
},
computed: {
// count() {
// return this.$store.count
// },
// ...mapState(['count']) 数组写法
...mapState({
a: 'count'
})
}
}
</script>
<style scoped lang="less">
</style>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 看传递的参数中能不能找到一个 install的方法 找到就执行 没找到
// 再去查看 参数是不是一个函数 是函数就执行
// 其他不管
export default new Vuex.Store({
state: {
// 放置的是以写公用数据
count: 100
},
mutations: {
// 放置的都是用来改变数据的方法
// 这里面的函数 必须是一些同步函数 // 原则(不是技术限制)
add(state, option = 10) {
state.count += option
},
minux(state) {
state.count -= 3
},
// asyncAdd(state) {
// setTimeout(() => {
// state.count += 120
// }, 1000);
// }
},
actions: {
asyncAdd(store, option) {
// store 就是new 出来的vuex实例
setTimeout(() => {
state.count += 120
}, 1000);
}
},
modules: {
// abc // 简写
}
})
// modules 模块举例
/* let abc = {
state: { abc: 100 },
// getters: {},
// mutations: {},
// actions: {},
// modules: {}
} */
Vue Router(路由)
history和hash模式
history:使用的是onpopstate,pushstate replaceState
hash:使用的是onhashchange
路由传参 的两种方式 query params
$route 属性或者参数
$router 想使用编程式导航的时候 才会使用
编程式导航
this.$router.push()
this.$router.replace
不管是replace或者push 参数等同于 :to 后的参数, push会新增一个历史记录,replace不会新增历史记录 是把当前路径替换了
权限管理
路由元信息
官方地址: 路由元信息 | Vue Router
路由元信息meta的title指定页面名,level指定权限等级
这里做权限