一点点的记录
生命周期
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("el : " + this.$el); //undefined
console.log("data : " + this.$data); //undefined
console.log("message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("el : " + this.$el); //undefined
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("el : " + (this.$el)); //已被初始化,没有值只是点个坑
console.log(this.$el);
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message)
}
常用到的组件传值方法
1,父组件传给子组件值
属性传值 props 工作中常用
$parent $children $ref
2,子组件向父组件传改的
发布订阅模式
3,兄弟组件传值 A与B
4,基于ref实现父子组件信息通信
5,$listeners/$attrs
6,vuex 工作中常用
设置属性的getter/setter
设置属性的getter，setter，我们可以在getter,setter中监听当前属性设置和获取的时候干什么
Object.defineProperty(obj,'name',{
get(){
console.log('Getter');
return '哈哈'
}
set(value){
console.log('setter',value);
}
});
obj.name='123'
vue响应式原理Object.defineProperty
let obj={
age:12
}
Object.defineProperty(obj,'name',{
value:'哈哈',
//=>是否允许当前的属性被删除，默认是false不可以删除,如果被defineProperty里的属性这项才管用，
//定义在外面的对象可以删除
configurable:false,
//=>是否为可枚举的属性,默认是不可以遍历出来的，不可枚举
enumerable:true,
//=>是否允许当前属性被修改，false不可以修改
writable:true
})
delete obj.name; //这句不可以删除
delete obj.age; //这句可以删除
vue-router
import Vue from 'vue';
import VueRouter from 'vue-router';
import store from './store/index';
import Custom from './pages/Custom';
import CustomList from './pages/custom/CustomList';
import CustomHandle from './pages/custom/CustomHandle';
import System from './pages/System';
import StaffList from './pages/system/staff/StaffList';
import StaffHandle from './pages/system/staff/StaffHandle';
import JobList from './pages/system/job/JobList';
import JobHandle from './pages/system/job/JobHandle';
import DepartmentList from './pages/system/department/DepartmentList';
import DepartmentHandle from './pages/system/department/DepartmentHandle';
Vue.use(VueRouter);
const router=new VueRouter({
mode:'hash',
routes:[
/*
第一级路由 name: //路由名称 path:路由路径 component:路由对应组件跟文件名保持一致
如果两个地址用一个组件，只是后面的参数不同那路由也可以配置参数路由
{
path: '',
redirect: {
path: '/custom/list',
query: {
type: 'my' //这里就是默认的参数
}
}
}
第二级路由都写在children:[
]
*/
//主路由
{
path: "/", //主路由重定向至company组件
redirect: "/Custom"
},
{
name: "custom", //路由名称
path: "/custom", //路由路径
component: Custom, //路由对应组件
children:[
{
path:'',
redirect:{
path:'/custom/list',
query:{
type:'my'
}
}
},
{
path:'list',
name:'customList',
component:CustomList
},
{
path:'handle',
name:'customHandle',
component:CustomHandle
}
]
},
{
name: "system", //路由名称
path: "/system", //路由路径
component: System,//路由对应组件
children:[
{
path:'', //这里是设置的默认的路由，刚进来显示哪个组件内容
redirect:{
path:'/system/stafflist',
}
},
{
path:'stafflist',
// name:'stafflist',
component:StaffList
},
{
path:'staffhandle',
// name:'staffhandle',
component:StaffHandle
},
{
path:'joblist',
// name:'joblist',
component:JobList
},
{
path:'jobhandle',
// name:'jobhandle',
component:JobHandle
},
{
path:'departmentlist',
// name:'departmentlist',
component:DepartmentList
},
{
path:'departmenthandle',
// name:'departmenthandle',
component:DepartmentHandle
}
],
//这里是当点击导航看是否有权限查看
beforeEnter(to, from, next) {
let power = store.state.power;
if (/(userhandle|departhandle|jobhandle)/.test(power)) {
next();
return;
}
Vue.prototype.$alert('您无权限访问此页面，请联系系统管理员！', '系统提示');
}
},
{
path: '*',
redirect: '/custom'
}
]
})
//将路由组件暴露出去
export default router;
vuex状态管理
一张图来了解vuex
diff算法
什么是diff算法?
1,去繁就简
2,vdom为何用diff算法
3,性能高，减少对DOM的频繁操作 4,diff算法的核心流程
5,patch函数，初始时把vnode直接添加到dom选择器里
6,如果oldVnode有值，然后对比oldVnode和newVnode把更新变化的修改生成补丁
vNode如何变成真实的dom节点的
