91 谈谈对keep-alive的了解
keep-alive` 可以实现组件的缓存,当组件切换时不会对当前组件进行卸载。常用的2个属性`include/exclude` ,2个生命周期`activated` ,`deactivated
92 Vue性能优化
编码优化:
-
事件代理 -
keep-alive
-
拆分组件 -
key
保证唯一性 -
路由懒加载、异步组件 -
防抖节流
Vue加载性能优化
-
第三方模块按需导入( babel-plugin-component
) -
图片懒加载
用户体验
-
app-skeleton
骨架屏 -
shellap
p壳 -
pwa
SEO优化
-
预渲染
93 Vue3.0相对于Vue2.x有哪些不同?
performance
首先在性能(performance)上有了更多的优化,一方面表现在virtual dom
的生成上更快了,另外在底层还做了一些监听的缓存,也就是事件在被创建的时候会被推进一个缓存中,后续没有改变会直接取缓存。
tree-shaking
tree-shaking它表示的是在打包的时候会去除一些无用的代码。而在Vue3中对它的支持更加友好了,例如像transition、v-model、computed等功能没有用到的话,那么最后打包产生的代码就会将它们去除。也就是说,如果你的Vue项目只写了一个Hello Word的话,那么最后打包的代码中就只有一些核心的代码,如更新算法、响应式等,打包生成的文件可能就只有13.5kb。
Fragments
碎片(Fragments),原本在Vue2.x中每个template下只能允许有一个根节点,但是在Vue3中它可以允许你有多个,用尤大大的话来说就是会将这些内容自动变为一个碎片。
TS
再者就是对TS的支持度很好。虽然Vue3本来就是用TS写的,但是不一定要用TS。另外它也支持Class Component,不过不是第一推荐。
Component API
语法上,对模版语法是零改变的。只不过更加推荐用Component API来写JS部分。Component API它并不是语法,而是新增的API。它带来的好处一个是逻辑重用,方便我们把一些功能的部分抽离出来。另一个它相对于options来说更加集中,用options来写代码想要追寻一个变量的变化比较麻烦。
关于兼容性
目前的Vue3.beta版本是不支持IE11的,因为核心的响应式原理用到了ES6的Proxy,但是以后会去兼容IE11。后面我们在创建一个Vue项目的时候,可以选择不同的版本,支持IE11和不支持IE11的。
什么时候能使用
现在的beta版本其实已经可以用了,对于一些新的小的项目可以试试水,这个可以自己评估。正式能够投入到生产使用中可能要等到年中 (终?)。
94 Vue中hash模式和history模式的区别
-
最明显的是在显示上, hash
模式的URL
中会夹杂着#
号,而history
没有。 -
Vue
底层对它们的实现方式不同。hash
模式是依靠onhashchange
事件(监听location.hash
的改变),而history
模式是主要是依靠的HTML5 history
中新增的两个方法,pushState()
可以改变url
地址且不会发送请求,replaceState()
可以读取历史记录栈,还可以对浏览器记录进行修改。 -
当真正需要通过 URL
向后端发送HTTP
请求的时候,比如常见的用户手动输入URL
后回车,或者是刷新(重启)浏览器,这时候history
模式需要后端的支持。因为history
模式下,前端的URL
必须和实际向后端发送请求的URL
一致,例如有一个URL
是带有路径path
的(例如www.lindaidai.wang/blogs/id
),如果后端没有对这个路径做处理的话,就会返回404
错误。所以需要后端增加一个覆盖所有情况的候选资源,一般会配合前端给出的一个404
页面。
hash:
window.onhashchange = function(event){
// location.hash获取到的是包括#号的,如"#heading-3"
// 所以可以截取一下
let hash = location.hash.slice(1);
}
95 了解history有哪些方法吗?说下它们的区别
history 这个对象在html5的时候新加入两个api history.pushState() 和 history.repalceState() 这两个 API可以在不进行刷新的情况下,操作浏览器的历史纪录。唯一不同的是,前者是新增一个历史记录,后者是直接替换当前的历史记录。
从参数上来说:
window.history.pushState(state,title,url)
//state:需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取
//title:标题,基本没用,一般传null
//url:设定新的历史纪录的url。新的url与当前url的origin必须是一样的,否则会抛出错误。url可以时绝对路径,也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/'),则变成 https://www.baidu.com/a/qq/,
//执行history.pushState(null, null, '/qq/'),则变成 https://www.baidu.com/qq/
window.history.replaceState(state,title,url)
//与pushState 基本相同,但她是修改当前历史纪录,而 pushState 是创建新的历史纪录
另外还有:
-
window.history.back()
后退 -
window.history.forward()
前进 -
window.history.go(1)
前进或者后退几步
从触发事件的监听上来说:
-
pushState()
和replaceState()
不能被popstate
事件所监听 -
而后面三者可以,且用户点击浏览器前进后退键时也可以
96 如何监听 pushState 和 replaceState 的变化呢?
利用自定义事件new Event()
创建这两个事件,并全局监听:
<body>
<button onclick="goPage2()">去page2</button>
<div>Page1</div>
<script>
let count = 0;
function goPage2 () {
history.pushState({ count: count++ }, `bb${count}`,'page1.html')
console.log(history)
}
// 这个不能监听到 pushState
// window.addEventListener('popstate', function (event) {
// console.log(event)
// })
function createHistoryEvent (type) {
var fn = history[type]
return function () {
// 这里的 arguments 就是调用 pushState 时的三个参数集合
var res = fn.apply(this, arguments)
let e = new Event(type)
e.arguments = arguments
window.dispatchEvent(e)
return res
}
}
history.pushState = createHistoryEvent('pushState')
history.replaceState = createHistoryEvent('replaceState')
window.addEventListener('pushState', function (event) {
// { type: 'pushState', arguments: [...], target: Window, ... }
console.log(event)
})
window.addEventListener('replaceState', function (event) {
console.log(event)
})
</script>
</body>
97 Vue组件内的导航守卫有哪几个?
-
beforeRouteEnter
-
beforeRouteUpdate
-
beforeLeave
98 beforeRouteEnter和另外两个有什么不同吗?
beforeRouteEnter
是支持给next
传递参数的唯一守卫,因为在这个路由守卫中还不能访问this,而为了能让我们访问组件实例,可以通过传一个回调给next
:
beforeRouteEnter(to, from, next) {
next(vm => {
// vm 就是组件实例
})
}
而对于另外两个,this
已经可用,所以不支持传递回调:
beforeRouteUpdate (to, from, next) {
// just use `this`
this.name = to.params.name
next()
}
离开守卫beforeRouteLeave
通常用来禁止用户还未保存修改之前离开,可以通过next(false)
来取消:
beforeRouteLeave (to, from, next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
99 完整的导航解析流程
-
导航被触发。 -
在失活的组件里调用离开守卫。 -
调用全局的 beforeEach
守卫。 -
在重用的组件里调用 beforeRouteUpdate
守卫 (2.2+)。 -
在路由配置里调用 beforeEnter
。 -
解析异步路由组件。 -
在被激活的组件里调用 beforeRouteEnter
。 -
调用全局的 beforeResolve
守卫 (2.5+)。 -
导航被确认。 -
调用全局的 afterEach
钩子。 -
触发 DOM 更新。 -
用创建好的实例调用 beforeRouteEnter
守卫中传给next
的回调函数。
100 你是怎么看Vue和React的?
首先它们都是当今比较流行的前端框架。
相同点:
-
Virtual DOM
。其中最大的一个相似之处就是都使用了Virtual DOM
。(当然Vue
是在Vue2.x
才引用的)也就是能让我们通过操作数据的方式来改变真实的DOM
状态。因为其实Virtual DOM
的本质就是一个JS
对象,它保存了对真实DOM
的所有描述,是真实DOM
的一个映射,所以当我们在进行频繁更新元素的时候,改变这个JS
对象的开销远比直接改变真实DOM
要小得多。 -
组件化的开发思想。第二点来说就是它们都提倡这种组件化的开发思想,也就是建议将应用分拆成一个个功能明确的模块,再将这些模块整合在一起以满足我们的业务需求。 -
Props
。Vue
和React
中都有props
的概念,允许父组件向子组件传递数据。 -
构建工具、Chrome插件、配套框架。还有就是它们的构建工具以及Chrome插件、配套框架都很完善。比如构建工具, React
中可以使用CRA
,Vue
中可以使用对应的脚手架vue-cli
。对于配套框架Vue
中有vuex、vue-router
,React
中有react-router、redux
。
不同点
-
模版的编写。最大的不同就是模版的编写, Vue
鼓励你去写近似常规HTML
的模板,React
推荐你使用JSX
去书写。 -
状态管理与对象属性。在 React
中,应用的状态是比较关键的概念,也就是state
对象,它允许你使用setState
去更新状态。但是在Vue
中,state
对象并不是必须的,数据是由data
属性在Vue
对象中进行管理。 -
虚拟 DOM
的处理方式不同。Vue
中的虚拟DOM
控制了颗粒度,组件层面走watcher
通知,而组件内部走vdom
做diff
,这样,既不会有太多watcher
,也不会让vdom
的规模过大。而React
走了类似于CPU
调度的逻辑,把vdom
这棵树,微观上变成了链表,然后利用浏览器的空闲时间来做diff
原文始发于微信公众号(消失的程序员):Vue.js面试题精选—10
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/250883.html