// 源码中找答案:compiler/codegen/index.js > genElement() if(el.staticRoot && !e.staticProcessed){ return ... }else if(el.for && !el.forProcessed){ return ... }else if(el.if && !el.forProcessed){ return ... } ...
// 源码中找答案:src/core/instance/state.js > initData()
// 源码中找答案:src/core/vdom/patch.js > updateChildren()
路由懒加载
const router = new VueRouter({ routes:[ { path:'/foo', component:() => import('./Foo.vue') } ] })
keep-alive缓存页面
<template> <div id="app"> <keep-alive> <router-view /> </keep-alive> </div> </template>
<template> <div class="cell"> <!-- 这种情况用v-show复用DOM,比v-if效果好 --> <div v-show="value" class="on">11111</div> <div v-show="!value" class="off">222222</div> </div> </template>
<template> <ul> <li v-for = "user in activeUsers" :key = "user.id" > {{ user.name }} </li> </ul> </template> <script> export default { computed:{ activeUsers: function(){ return this.users.filter(function(user){ return user.isActive }) } } } </script>
created(){ this.timer = setInterval(this.refresh,2000) }, beforeDestroy(){ clearInterval(this.timer) }
<img v-lazy="/static/img/1.png">
import Vue from 'vue' import { Button,Select } from 'element-ui' Vue.use(Button) Vue.use(Select)
<template> <div class="cell"> <div v-if="props.value" class="on"></div> <section v-else class="off"></section> </div> </template> <script> export default { props:['value'] } </script>
<template> <div> <childcomp /> </div> </template> <script> export default { components:{ childcomp:{ methods:{ heavy(){ //耗时任务 } render(h){ return h('div',this.heavy()) } } } } } </script>
长性能列表的优化
export default { data: () => ({ users:[] }) async created(){ const users = await axios.get('/api/users') this.users = object.freeze(users) } }
<User v-bind="$props">
{ tag:'xx', props:{ id:'xx' }, children:[ tag:'xx', children:"xxx" ] }
更快
期待更多的编译时提示来减少运行时开销,使用更有效的代码来创建虚拟节点
组件快速路径 + 单个调用 + 子节点类型检测
vue3中可以单独重新渲染父级和子级
使用静态树提升,这意味着Vue3 的编译器将能够检测到什么是静态的,然后将其提升,从而降低了渲染成本。
使用静态属性提升,Vue 3 打补丁时将跳过这些属性不会改变的节点,但是孩子还要继续patch
Vue 2的响应式系统使用 Object.defineProperty的getter和setter。Vue 3将使用ES2015 Proxy作为其观察机制,这将会带来如下变化:
更小
更容易维护
Vue 3将带来更可维护的源代码。他不仅会使用TypeScript,而且许多包被解耦,更加模块化
更加友好
更容易使用
由于篇幅原因,仅展示一部分面试题详解,更多最新的Vue面试题整理成了一个PDF,需要的朋友点击这里免费获取。