2021-07-10

**动态组件: **

	<component  :is="componentsName"/>

异步组件
按需加载, 减少在大量组件在单个页面 渲染时候的压力

export default(){
	components:{
		tabBar:()=>import "tabbar" from '...'
	}
}

keep-alive
缓存组件, 频繁切换时不需要重复渲染

<keep-alive>
	<a/>
	<b/>
	<c/>
</keep-alive>

mixIn
但项目中有多个组件拥有相同的业务处理时,可以使用mixIn来进行代码封装;
优点 : 代码量减少 , 复用性更高
缺点: 可读性差,命名冲突, 变量覆盖,复杂度高 多对多情况 修改代码很容易出问题

import myMixin1 from './mixin'; // 逻辑封装 1
import myMixin2 from './mixin'; // 逻辑封装 2
export default{
	mixins:[myMixin1,myMixin2]
}
// 这样引入后就可以使用了,minIn组件中的methods data 包括生命周期钩子 都可以被当前组件使用

---

自定义 v-model

vue-router 有三种模式:
支持hash history abstract 3种方式
提供vouter-view 与 router-link 两种组件

定义的步骤:
1.首先引入需要作为路由配置的页面
2.定义路由:配置路由对象,const routers = [{path:‘a’,component:a},{path:‘b’,component:b}]
3.创建router实例 const router = new vueRouter({routers})
4 挂载 const app = new Vue({})

---

使用router-link 组件来导航切换, to属性指定跳转的链接

	new Router({
		routes:	routes,
		mode:"history",
		base:"/base/", // 网站的基目录
		scrollBehaviorBar(to,from,savedPosition){
			// 可以用于返回到上次浏览的地方
			if(savedPosition){
				return savedPosition
			}else{
				return { x:0, y:0 }
			}
		},
		parseQuery(query){
			// query 就是url的query ,
			// 这里是特定化需求的时候, 为开发者准备的方法,获取url 并转为对象
		},
		strigifyQuery(query){
			// 同理 , 将 query 转为 json字符串
		}
	})

用于渲染路由组件

Object.definderProperty 与 Proxy详解
defineProperty 的 属性们分别是什么

vue源码在Observe类 操作之后, render函数为每一个data 都执行一个watcher.

diff
虚拟dom
虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象
状态变更时，记录新树和旧树的差异
最后把差异更新到真正的dom中

Vue中的key到底有什么用
Vue的就地更新策略

**ssr **

v-model原理

v-if 与 v-for 一起使用的优化 计算属性
defineProperty 原理

Promise 是异步编程的一种解决方案，比传统的异步解决方案【回调函数】和【事件】更合理、更强大。现已被 ES6 纳入进规范中。