Vue路由和Vuex的学习

2021-05-23
1、ESLint规范：vuecli安装模板项目的时候可以选择安装，主要用于代码编译时检测代码是否符合规范
  如果项目创建后不想使用，可在项目的config文件夹的index.js中将useEslint改为false
2、runtime+compiler和runtime-only的区别
	runtime+compiler运行：template解析->ast(抽象语法树)编译->render->virtual dom(虚拟dom)->真实dom
	runtime-only运行：render->virtual dom(虚拟dom)->真实dom
	对比结论：
		1：runtime-only流程少，性能高
		2：runtime-only需要的源码更少
3、Vue的render函数：
	render:function(createElement){ //createElement参数为函数
		//1、普通用法：createElement("标签",{标签的属性},['内容'])、内容可嵌套createElement使用
		return createElement('h2',{class:'box'},['hello liuwenpu'])
		//2、传入组件对象
		return createElement(组件对象)
	}
4、Vue在使用render函数直接加载template模板，那么template模板是由谁来进行编译的呢？
	解答：在运行时template模板会通过vue-template-compiler进行编译成render对象
	
2021-05-24
1、vue/cli3生成代码，会把原有复杂的配置文件，vue2中的build和config文件夹等都去除，可通过以下三种方式修改配置
	1：使用vue ui命令启动图形化管理，导入需要管理的项目进行配置修改
	2：在node_modules中@vue==>cli-service目录下修改webpack.config.js
	3、在项目顶层目录下定义vue.config.js使用module.exports={}定义配置
2、ES6的箭头函数使用
	1：无参数定义：const wcs=()=>{};
	2：多参数定义：const dcs=(num1,num2,num3)=>{};
	3：单参数定义：const ocs=num1=>{}; //可省略括号定义
	4：箭头函数代码块中只有一行代码时：const yhdm=num1=> num1*9; //可省略大括号
	5：箭头函数中this的取值：向外层作用域中，一层层的查找this，查找到有this的定义，进行取值

Vue-Router的学习日志  ====》对应项目vue-router-study
2021-05-29 
1、修改浏览器url不重新请求服务器资源
	1：使用location.hash='aaa'
	2：history.pushState(data,title,url); 
		-->h5做法，类似于栈的存储，先进后出，可调用history.back()回到上一个url，
		history.forward()往下一个url，history.go(-1)指定跳转，可正数和负数
	3：history.replaceState(data,title,url); -->h5,与上面不同的是他直接替换url，无法返回，
2、vue-router的基本使用
	1：安装vue-router=》npm install --save vue-router
	2: 使用Vue.use(插件)装载vue-router
	3：实例化vue-router
	4：Vue实例中引用router
	5：vue-router的3.5.1版本是为Vue2服务的，vue3中使用需版本为vue-router@4.0.4
3、vue-router的标签
	1、router-link：to属性，用于指定path，tag属性，用于指定渲染成button，li等标签，默认为a标签，
				replace属性，设置为h5的replaceState，无法使用go，默认为pushState
	2、router-view：用于渲染router-link指定页面的内容
	3、通过监听的方式替换router-link修改路由：
		1：this.$router.push("/home")  //对应h5的history.pushState()
		2：this.$router.replace("/home")  //对应h5的history.replaceState()
4、vue-router的动态路由
    1：首先在routers定义路由对象中path为：'user/:自定义属性'
    2: 在router-link使用时为to="/user/参数"，可在组件中定义data动态参数，使用v-bind绑定传递
	3：可在user组件中使用{{$route.params.自定义属性}}获取router-link使用时传递的参数
5、vue-router的懒加载
	1、默认vue在打包的时候会把所有业务代码打包到一个app的js中，因此页面运行去请求的时候会一次性把所有数据请求，这个时候效率较低，因此用到路由懒加载
	2、manifest为底层支撑js、vendor为第三方组件打包后的js
	3、配置路由懒加载后每个路由对应的Vue会打包成单独的js文件
	4、懒加载的配置：const User=() => import("../components/User")
6、vue-router嵌套使用
	1、在router的配置文件中引入需要跳转的组件模板
	2、在某一个根路由下配置中添加children对象，配置嵌套的子路由
	3、父组件中定义router-link去切换，router-view展示子组件内容
7、vue-router参数传递
	1、param方式：
		1、vue-router路由配置动态属性:  path:'/user/:userId',
		2、router-link标签中使用v-bind绑定传递
		3、路由跳转后的界面使用==> this.$route.params.userId
	2、query方式：
		1、使用v-bind绑定to传入对象，:to="{path:'/profile',query:{name:'刘文蒲',age:'18',height:'1.78'}}"
		2、使用页面取值：this.$route.query获取整个对象，可this.$route.query.name取指定属性值
8、导航守卫:分为全局导航守卫、路由独享守卫、组件内守卫
	1：全局导航守卫使用==》router.beforeEach((to,from,next)=>{}) 用于路由跳转前监听回调
	2：路由独享守卫==》直接配置在路由对象中，例如path、component、meta、beforeEach
	3：组件内守卫：可参考官网详细查看
9、keep-alive：缓存组件，使组件切换离开时不被销毁、切换回来时不重新创建
	include:正则表达式或者字符串 ==》只有匹配的组件才会被缓存
	exclude:正则表达式或者字符串 ==》根据组件的name排除某一个组件不被缓存

10、tabbar的封装，参考项目===》tabbar

11、vuex的学习
1、vuex主要用于定义全局变量数据提供给各个组件进行使用
2、五个核心概念
	1：stste ==》 用于定义初始变量，定义的变量可在所有组件中使用this.$store.state.变量名取用
	2：getters ==》 用于定义计算属性、对state的数据加工、可在所有组件中使用this.$store.getters.属性名取用
	3：mutations ==》用于修改state中的变量，必须经过mutatitions进行修改，才可被devtools工具进行状态监听，注意只能同步修改在此直接调用
	4：actions ==》用于处理组件中需要异步对state数据进行修改，在组件中使用dispatch分发，再由分发的方法处理异步调用mutations方法进行修改state
	5：modules ==》使用模块化注册属性、计算函数、同步、异步方法、取模块的变量时需要加上模块的属性==》this.$store.state.模块属性.变量


Vue组件的声明周期函数：
1、activated(){ //当前组件处于活跃状态时触发 }		==》该生命周期函数只有使用了keep-alive时才有效
2、deactivated(){ //当前组件失去活跃状态时触发 }	==》该生命周期函数只有使用了keep-alive时才有效
3、created(){ //组件在创建的时候触发 }
4、destroyed(){ 组件销毁时触发 }