[Vue] vue的一些面试题4

Posted 2021-03-25 mybilibili

1.你知道 nextTick 的原理吗？

用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

异步更新队列提到 DOM 的更新是异步执行的，只要数据发生变化，将会开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

简单来说，就是当数据发生变化时，视图不会立即更新，而是等到同一事件循环中所有数据变化完成之后，再统一更新视图。

2. 说说你对 v-clock 和 v-pre 指令的理解

v-cloak 指令只是在标签中加入一个 v-cloak 自定义属性，在 html 还编译完成之后该属性会被删除。
v-pre 可以用来阻止预编译，有 v-pre 指令的标签内部的内容不会被编译，会原样输出。

3.vue 过渡动画实现的方式有哪些？

• 使用 vue 的 transition 标签结合 css 样式完成动画
• 利用 animate.css 结合 transition 实现动画
• 利用 vue 中的钩子函数实现动画

4.vue 父子组件双向绑定的方法有哪些？

• 利用对象的引用关系来实现
• 父子组件之间的数据传递
• 使用.sync 修饰符

5.如何解决 vue 打包 vendor 过大的问题？

• 在 webpack.base.conf.js 新增 externals 配置，表示不需要打包的文件，然后在 index.html 中通过 CDN 引入
• 使用路由懒加载

6.vue-loader 是什么？它有什么作用？

解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。

7.SPA 单页面的实现方式有哪些？

• 监听地址栏中 hash 变化驱动界面变化

• 用 pushsate 记录浏览器的历史，驱动界面发送变化

• 直接在界面用普通事件驱动界面变化

8.说说你对 SPA 单页面的理解，它的优缺点分别是什么？

介绍：SPA 应用就是一个 web 应用，可理解为：是一种只需要将单个页面加载到服务器之中的 web 应用程序。当浏览器向服务器发出第一个请求时，服务器会返回一个 index.html 文件，它所需的 js，css 等会在显示时统一加载，部分页面需要时加载。
优点：

• 1.良好的交互式体验。意思是：用户无需刷新页面，获取数据通过异步 ajax 获取，页面显示流畅
• 2.良好的前后端分离模式（MVVM），减轻服务端压力。服务器只需要输出数据就可以，不用管逻辑和页面展示，吞吐能力会提高几倍
• 3.共用同一套后端程序代码，不用修改就可用于 web 界面，手机和平板等客户端设备

缺点：

• 1.不利于 SEO 优化
• 2.由于单页应用在一个页面中显示，所以不可以使用浏览器自带的前进后退功能，想要实现页面切换需要自己进行管理
• 3.首屏加载过慢（初次加载耗时多）原因是：为了实现单页 web 应用功能及展示效果，在页面初始化的时候就会将 js，css 等统一加载，部分页面在需要时加载。当然也有解决方法。

解决方法：

• ① 使用路由懒加载
• ② 开启 Gzip 压缩
• ③ 使用 webpack 的 externals 属性把不需要的库文件分离出去，减少打包后文件的大小
• ④ 使用 vue 的服务端渲染（SSR）

举例 spa 应用：网易云音乐、QQ 音乐等

9.v-if 和 v-for 的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？

v-for 的优先级更高
避免出现这种情况，如果实在需要，则在外嵌套 template，在这一层进行 v-if 判断，然后在内部进行 v-for 循环，避免每次只有 v-if 只渲染很少一部分元素，也需要遍历同级的所有元素

10.为什么 data 属性必须声明为返回一个初始数据对应的函数呢？

对象为引用类型，当重用组件时，由于数据对象都指向同一个 data 对象，当在一个组件中修改 data 时，其他重用的组件中的 data 会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object 的实例），引用地址不同，则不会出现这个问题。

11.watch 怎么深度监听对象变化

‘obj.xx‘: { handler: function(val) {}, deep:true }

12.怎么在 watch 监听开始之后立即被调用？

‘obj.xx‘: { handler: function(val) {}, immediate:true }

13.watch 和 computed 有什么区别？

• watch 是侦听属性，computed 是计算属性
• watch 是为了应对复杂的逻辑计算，computed 是对数据的变化作出反应
• watch 是只有当缓存改变时才执行，computed 是只要从新渲染就会执行
• watch 有缓存，computed 没有缓存

14.v-show 和 v-if 有什么区别？使用场景分别是什么？

v-show 是 css 的 display 显示和隐藏
v-if 是 DOM 销毁和重建

v-show 使用场景：

• 频繁的切换显示状态
• 预渲染需求

15.什么是双向绑定？原理是什么？

通过 Observer 把数据劫持(Object.defineProperty()) 、加入到订阅器(Dep) 订阅器收集订阅者(Watcher )、视图通过编译(Compile)、解析指令(Directive)等一些列操作收集给订阅者 、最后通过触发数据变化 update 通知所有订阅者完成数据驱动