码迷,mamicode.com
首页 > 其他好文 > 详细

[Vue] vue的一些面试题4

时间:2019-10-16 21:42:55      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:mpi   提取   区别   意思   是什么   ext   ansi   过渡   库文件   

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 通知所有订阅者完成数据驱动

[Vue] vue的一些面试题4

标签:mpi   提取   区别   意思   是什么   ext   ansi   过渡   库文件   

原文地址:https://www.cnblogs.com/mybilibili/p/11688490.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!