vue整理的面试题
- vue的hash模式和history模式
hash模式：
使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。通过hashchange()监听hash值的变化
history模式
由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'"
//main.js文件中
const router = new VueRouter({
mode: 'history',
routes: [...]
})
- vue与react以及Angular的区别
React、Vue和Angular的区别 - 简书
- vue路由中的钩子函数
全局前置守卫、全局解析守卫、全局后置钩子、路由独享守卫、组件内的守卫
- 什么是vue中的自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
- Vue中如果自定义一个过滤器
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
{{ message | capitalize }}
"rawId | formatId">
在一个组件的选项中定义本地的过滤器
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
- 谈一下对于vue中keep-alive的理解
kee-palive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存
基本用法
//被keep-alive包含的组件会被缓存
被keep-alive包含的组件不会被再次初始化，也就意味着不会重走生命周期函数，但是有时候是希望我们缓存的组件可以能够再次进行渲染，这时Vue为我们解决了这个问题，被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated：
- activated 当 keep-alive 包含的组件再次渲染的时候触发
- deactivated 当 keep-alive 包含的组件销毁的时候触发
keep-alive是一个抽象的组件，缓存的组件不会被mounted,为此提供activated和deactivated钩子函数
- 什么是vue中的计算属性，计算属性和watch的区别是什么
computed看上去是方法，但是实际上是计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算
watcher 更像是一个 data 的数据监听回调，当依赖的 data 的数据变 化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无 效，提供中间值 特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使 用watch。
总结：
如果一个数据依赖于其他数据，那么把这个数据设计为computed的
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化
- 单页面应用的优缺点是什么
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
基于上面一点，SPA 相对对服务器压力小；
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势
- 怎么定义 vue-router 的动态路由? 怎么获取传过来的
（1）getDescribe(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
需要对应路由配置如下：
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。
this.$route.params.id
（2）父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
对应路由配置: 这里可以添加:/id 也可以不添加，不添加数据会在url后面显示，不添加数据就不会显示
{
path: '/describe',
name: 'Describe',
component: Describe
}
子组件中: 这样来获取参数
this.$route.params.id
（3）父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
this.$router.push({
path: '/describe',
query: {
id: id
}
})
对应路由配置：
{
path: '/describe',
name: 'Describe',
component: Describe
}
对应子组件: 这样来获取参数
this.$route.query.id
这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
- Vue中$nextTick的使用
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
- Vue中如何编写可复用的组件
链接：Vue.js 可复用性的组件详解 - 知乎
- Vue中如何监听键盘事件中的按键
.enter .tab .delete .esc .space .up .down .left .right
- Vue中对象更新检测的注意事项
Vue.set()
vm.$set()
组件及其属性
to：一个路径字符串，或者一个Location Descriptor对象。
tag：渲染的html元素类型，默认是。
exact：用于控制当前激活项的匹配行为（严格匹配或者贪婪匹配）。
append：控制相对链接路径的追加方式。
replace：替代而不是作为历史条目压榨你。
active-class：当前链接项激活时增加的css样式。
- Vue中如何实现tab的切换功能
链接：VUE实现Tab切换 - 掘金
- vue中实现切换页面时为左滑出效果
链接：https://www.jb51.net/article/161364.htm
- Vue.use是做什么的原理是什么
链接：Vue.use(plugin)详解 - 掘金
- vue中如何监控某个属性的变化
使用watch
- delete和vue.delete删除数组的区别
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。 Vue.delete 直接删除了数组 改变了数组的键值。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！