**动态组件: **
<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 纳入进规范中。