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 通知所有订阅者完成数据驱动
原文地址:https://www.cnblogs.com/mybilibili/p/11688490.html