Vue.js面试题(一)

简介: Vue.js面试题(一)

1. ★★★ 如何再Vue的单文件组件里的样式定义全局CSS?

在style标签上不加上scoped的属性,默认为全局css样式


2. ★★ vue-router 3.1.0 新增的v-slot属性怎么用?

router-link 通过一个作用域插槽暴露底层的定制能力。

这是一个更高阶的 API,主要面向库作者,但也可以为开发者提供便利,

多数情况用在一个类似 NavLink 这样的自定义组件里。

在使用 v-slot API 时,需要向 router-link 传入一个单独的子元素。

否则 router-link 将会把子元素包裹在一个 span 元素内。


3. ★★★ 如何实现一个路径渲染多个组件?

可以通过命名视图(router-view),它容许同一界面中拥有多个单独命名的视图,

而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。

通过设置components即可同时渲染多个组件。


4. ★★★ 如何实现多个路径共享一个组件?

只需将多个路径的component字段的值设置为同一个组件即可。


5. ★★★ 如何监测动态路由的变化

可以通过watch方法来对$route进行监听,

或者通过导航守卫的钩子函数beforeRouteUpdate来监听它的变化。


6. ★★★ 对MVC,MVP,MVVM的理解

mvc 和 mvvm 其实区别并不大。都是一种设计思想。

主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。

mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。

当 Model 频繁发生变化,开发者需要主动更新到 View 。


MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。

1、Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;

View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,

ViewModel 是一个同步 View 和 Model 的对象。

2、在 MVVM 架构下,View 和 Model 之间并没有直接的联系,

而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的,

因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。

3、ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,

而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,

因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,

复杂的数据状态维护完全由 MVVM 来统一管理。


7. ★★ 说一下r o o t , root,root,parent,$refs

$r o o t ,和 root,和root,和parent都能访问父组件的属性和方法,

区别在于如果存在多级子组件,通过parent 访问得到的是它最近一级的父组件,

通过root 访问得到的是根父组件。

通过在子组件标签定义 ref 属性,在父组件中可以使用$refs 访问子组件实例。


8. ★★★★★ 你知道Vue响应式数据原理吗?Proxy 与 Object.defineProperty 优劣对比?

响应式原理

vue的响应式实现主要是利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。在组件初始化时会给每一个data属性注册getter和setter,然后再new 一个自己的Watcher对象,此时watcher会立即调用组件的render函数去生成虚拟DOM。在调用render的时候,就会需要用到data的属性值,此时会触发getter函数,将当前的Watcher函数注册进sub里。当data属性发生改变之后,就会遍历sub里所有的watcher对象,通知它们去重新渲染组件。


proxy的优势:

Proxy 可以直接监听对象而非属性,可以直接监听数组的变化;

Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的;

Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改;


Object.defineProperty 的优势:

兼容性好,支持 IE9,而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill(垫片)来弥补


9. ★★★★ Composition API 的出现带来哪些新的开发体验,为啥需要这个?

  • 在Compostion API 中时根据逻辑相关组织代码的,提高可读性和可维护性,类似于react的hook写法。
  • 更好的重用逻辑代码,在Options API中通过MIxins重用逻辑代码,容易发生命名冲突且关系不清。
  • 解决在生命周期函数经常包含不相关的逻辑,但又不得不把相关逻辑分离到了几个不同方法中的问题,如在mounted中设置定时器,但需要在destroyed中来清除定时器,将同一功能的代码拆分到不同的位置,造成后期代码维护的困难。

10. ★★★ 什么情况下使用 Vuex

如果应用够简单,最好不要使用 Vuex,一个简单的 store 模式即可,

需要构建一个中大型单页应用时,使用Vuex能更好地在组件外部管理状态


11. ★★★ Vuex可以直接修改state的值吗?

可以直接修改,但是极其不推荐,

state的修改必须在mutation来修改,

否则无法被devtool所监测,无法监测数据的来源,无法保存状态快照,

也就无法实现时间漫游/回滚之类的操作。


12. ★★★★ 为什么Vuex的mutation不能做异步操作

Vuex中所有的状态更新的唯一途径都是mutation,

异步操作通过 Action 来提交 mutation实现,这样使得我们可以方便地跟踪每一个状态的变化,

从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

每个mutation执行完成后都会对应到一个新的状态变更,这样devtools就可以打个快照存下来,

否则无法被devtools所监测。

如果mutation支持异步操作,就没有办法知道状态是何时更新的,

无法很好的进行状态的追踪,给调试带来困难。


13. ★★★ v-model和vuex有冲突吗?

用法上不冲突,但是设计理念不一致。


双向绑定的理念是,双向数据流,数据和视图可以互相改变,用法简单但可维护性差。


vuex 的理念是,单向数据流,用法复杂但是可维护性强。


14. ★★★ 解释单向数据流和双向数据绑定

对于 Vue 来说,组件之间的数据传递具有单向数据流这样的特性称为单向数据流,

单向数据流(Unidirectional data flow)方式使用一个上传数据流和一个下传数据流进行双向数据通信,

两个数据流之间相互独立,单向数据流指只能从一个方向来修改状态。


双向数据绑定即为当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化,两个数据流之间互为影响。


15. ★★ Vue 如何去除url中的#

将路由模式改为history


16. ★★★ route和route 和 router 的区别

$route用来获取路由的信息的,它是路由信息的一个对象,里面包含路由的一些基本信息,

包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom等。


$router主要是用来操作路由的,它是VueRouter的实例,包含了一些路由的跳转方法,钩子函数等


17. ★★ 对比 jQuery,Vue 有什么不同

jQuery 专注视图层,通过直接操作 DOM 去实现页面的一些逻辑渲染;

Vue 专注于数据层,通过数据的双向绑定,最终表现在 DOM 层面,减少了 DOM 操作。

Vue 使用了组件化思想,使得项目子集职责清晰,提高了开发效率,方便重复利用,便于协同开发


18. ★★★ Vue 中怎么自定义指令

通过directive来自定义指令,自定义指令分为全局指令和局部指令,

自定义指令也有几个的钩子函数,常用的有bind和update,当 bind 和 update 时触发相同行为,

而不关心其它的钩子时可以简写。

一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。


19. ★★★ Vue 中怎么自定义过滤器

通过filter来定义过滤器,过滤器分为全局和局部过滤器,

过滤器的主体为一个普通的函数,来对数据进行处理,可以传递参数。

当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,

局部过滤器优先于全局过滤器被调用。


20. ★★★ Vue 等单页面应用的优缺点

优点

1单页应用的内容的改变不需要重新加载整个页面,web应用更具响应性和更令人着迷。

2、单页应用没有页面之间的切换,就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象

3、单页应用相对服务器压力小,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍。

4、良好的前后端分离。后端不再负责模板渲染、输出页面工作,后端API通用化,即同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端。


缺点

1、首次加载耗时比较多。

2、SEO问题,不利于百度,360等搜索引擎收录。

3、容易造成Css命名冲突。

4、前进、后退、地址栏、书签等,都需要程序进行管理,页面的复杂度很高,需要一定的技能水平和开发成本高。


Vue.js面试题(二)https://developer.aliyun.com/article/1399412?spm=a2c6h.13148508.setting.14.59904f0eEJICdO

相关文章
|
4天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
4天前
|
前端开发 JavaScript
JavaScript:this-关键字,2024中级前端开发面试解答
JavaScript:this-关键字,2024中级前端开发面试解答
|
4天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
4天前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
4天前
|
前端开发 JavaScript
web前端JS高阶面试题,2024我的前端大厂面试之旅
web前端JS高阶面试题,2024我的前端大厂面试之旅
|
4天前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
4天前
|
JSON 前端开发 JavaScript
【JavaScript】面试手撕深拷贝(2),2024年最新nacos面试题及答案
【JavaScript】面试手撕深拷贝(2),2024年最新nacos面试题及答案
【JavaScript】面试手撕深拷贝(2),2024年最新nacos面试题及答案
|
4天前
|
JSON JavaScript 前端开发
【JavaScript】面试手撕深拷贝(1),面试前必看的一本书书籍是什么
【JavaScript】面试手撕深拷贝(1),面试前必看的一本书书籍是什么
|
4天前
|
缓存 前端开发 JavaScript
Javascript模块化开发基础,最新美团点评前端团队面试题
Javascript模块化开发基础,最新美团点评前端团队面试题
|
5天前
|
JavaScript 前端开发 程序员
javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍
javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍