vue常见面试题

1.说说VUE的优点？

答：轻量级框架：20kb,(react:60kb),只关注视图层，是一个构建数据的视图集合，大小只有几十kb；

        简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；

        双向数据绑定：保留了angular的特点，在数据操作方面更为简单；

        组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；

        视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；

        虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式； 

运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

 

2.vue父组件向子组件怎么传递数据？

答：通过props

 

3.子组件向父组件怎么传递事件？

答：通过$emit方法

4.v-show和v-if指令的共同点和不同点？

答: 共同点：都能控制元素的显示和隐藏；

     不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

     总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。

 

5.如何让CSS只在当前组件中起作用？

答：在组件中的style前面加上scoped

6.<keep-alive></keep-alive>的作用是什么?

答:keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

7.如何获取dom?

答：ref="domName" 用法：this.$refs.domName

8.说出几种vue当中的指令和它的用法？

答：v-model双向数据绑定；

       v-for循环；

       v-if v-show 显示与隐藏；

       v-on事件；v-once: 只绑定一次。

9. vue-loader是什么？使用它的用途有哪些？

答：vue文件的一个加载器，将template/js/style转换成js模块。

       用途：js可以写es6、style样式可以scss或less、template可以加jade等

10.为什么使用key?

答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。

作用主要是为了高效的更新虚拟DOM。

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

当设置deep：true时，就可以深度监听到对象到内部值的变化。

12.v-modal的使用。

答：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

       v-bind绑定一个value属性；

       v-on指令给当前元素绑定input事件。

13.请说出vue.cli项目中src目录每个文件夹和文件的用法？

答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置; app.vue是一个应用主组件；main.js是入口文件。

14.分别简述computed和watch的使用场景

答：computed:

　　　　当一个属性受多个属性影响的时候就需要用到computed

　　　　最典型的例子： 购物车商品结算的时候

       watch:

　　　　当一条数据影响多条数据的时候就需要用watch

　　　　例子：搜索数据

15.v-on可以监听多个方法吗？

答：可以，例子：<input type="text" v-on="{input:onInput,focus:onFocus,blur:onBlur}">。

16.$nextTick的使用

答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，

你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

 

17.vue组件中data为什么必须是一个函数？

答：因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。

　　组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

18.vue.js页面的闪烁怎么解决？

答：在vue.js有一个v-cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和css使用时，这个指令可以隐藏未编译的标签，直到实例编译结束：

不会显示，直到编译结束。

[v-cloak] {
      display: none;
}
<div v-cloak>{{dada}}</div>

19.Vue中双向数据绑定是如何实现的？

答：vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

20.说说单页面应用和多页面应用区别及优缺点

答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。

单页面缺点：不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。

21.v-if和v-for的优先级

答：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。

如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

22.assets和static的区别

答：相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点

       不相同点：assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。

       建议：将项目中template需要的样式文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。

23.vue常用的修饰符

答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；

       .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；

       .capture：与事件冒泡的方向相反，事件捕获由外到内；

       .self：只会触发自己范围内的事件，不包含子元素；

       .once：只会触发一次。

        v-model的修饰符：

        v-model.lazy,懒加载，失去焦点或按回车键时生效

        v-model.number,v-model默认的是字符格式，转数字。

        v-model.trim,去除首尾两边的空格

24.vue的两个核心点

答：数据驱动、组件系统

       数据驱动：ViewModel，保证数据和视图的一致性。

       组件系统：应用类UI可以看作全部是由组件树构成的。

25.说说vue和jQuery的区别

答：jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

26. 引进组件的步骤

答: 在template中引入组件；

在script的第一行用import引入路径；

用component中写上组件名称。

27.delete和Vue.delete删除数组的区别

答：delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

28.SPA首屏加载慢如何解决

答：安装动态懒加载所需插件；使用CDN资源。

29.怎么解决vue动态设置img的src不生效的问题？

因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require。

require('@/assets/images/xxx.png')

30.vue的is这个特性用过吗，主要用在哪些方面？

vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题。

<ul> <li is='my-component'></li> </ul>

31.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？

答：根据vue-cli脚手架规范，一个js文件，一个CSS文件。

32.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

答：Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

33.Vue2中注册在router-link上事件无效解决方法

答： 使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。

34.RouterLink在IE和Firefox中不起作用（路由不跳转）的问题

答: 方法一：只用a标签，不适用button标签；方法二：使用button标签和Router.navigate方法.

35.vue中怎么重置data?

答：初始状态下设置data数据的默认值，重置时直接Object.assign(this.$data, this.$options.data())

       说明：this.$data获取当前状态下的datathis.$options.data()获取该组件初始状态下的data(即初始默认值)如果只想修改data的某个属性值，可以this[属性名] = this.$options.data()[属性名]，如

this.message = this.$options.data().message

36.请说下封装 vue 组件的过程？

答：1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(os：思考1小时，码码10分钟，程序猿的准则。)

　　2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。

　　3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。

　　4. 封装完毕了，直接调用即可

37.params和query的区别

答：用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

       url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

       注意点：query刷新不会丢失query里面的数据

       params刷新 会 丢失 params里面的数据。

38.vue更新数组时触发视图更新的方法

答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()

39.vue常用的UI组件库

答：Mint UI，elementUI，VUX，ant-design

40.vue修改打包后静态资源路径的修改

答：cli2版本：将 config/index.js 里的 assetsPublicPath 的值改为 './' 。

build: {
...
assetsPublicPath: './',
...
}

       cli3版本：在根目录下新建vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改）

module.exports = {
publicPath: '', // 相对于 HTML 页面（目录相同） }

41.从0到1自己构架一个vue项目，说说有哪些步骤，哪些重要插件、目录结构会怎么组织？

      整个项目需求分析，按需求确定基本的技术栈，以及整体逻辑。
      vue-cli 脚手架搭建，涉及到webpack，如有脚手架不满足的需求，需要做调整，如项目环境在域名的二级目录，图片、字体路径修改等。
      开发、测试、预发布、正式环境配置，以及package.json script 脚本补充。
涉及到https，需要兼容http。
      增加目录：assets、layouts 、api、component、libs、plugin、router、store。（有本地mock习惯的加上mock目录），store内部目录划分。
      安装必须的库并引入，例如ui框架、babel、axios， 写好axios 拦截组件。
写好或copy常用的小插件，比如时间转换、cookie设置获取、千分位设置、邮箱校验等
      git 工作流程梳理以及版本发布注意事项。
     .editorconfig配置、 .gitignore 配置， readme 书写

42. 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？

不能同名 因为不管是计算属性还是data还是props 都会被挂载在vm实例上，因此 这三个都不能同名。同名时会报错：The computed property "xxxx" is already defined in data

43.vue中data的属性可以和methods中的方法同名吗？为什么？

不可以。在initState的时候，会对data中的属性、props、methods的属性名进行检查。出现同名立即warn。

44.怎么给vue定义全局的方法？

通过prototype，这个非常方便。Vue.prototype[method]=method;
通过mixin，Vue.mixin(mixins);

45.怎么解决vue打包后静态资源图片失效的问题？

最新的vue-cli 需要在根目录下建一个vue.config.js 在里面配置publicPath:'./'即可.

46.如何引入scss?引入后如何使用？

安装scss依赖包：npm install sass-loader --save-dev npm install node-sass --save-dev

在build文件夹下修改 webpack.base.conf.js 文件，在 module 下的 rules 里添加配置，如下：

{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] }

应用：在vue文件中应用scss时，需要在style样式标签上添加lang="scss"，即<style lang="scss">

47.说说你对选项el,template,render的理解？

       当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。

48、对于MVVM的理解？

        MVVM 是 Model-View-ViewModel 的缩写。

        Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。

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

        ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。

        在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

        ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

49、 Vue实现数据双向绑定的原理：Object.defineProperty（）

        vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

        vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

50、你怎么理解vue中的diff算法？

        diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比（即diff），将变化的地方更新在真实DOM上；
另外，也需要diff高效的执行对比过程，从而降低时间复杂度为0(N).

        vue 2.x中为了降低Watcher粒度，每个组件必须有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方。

        vue中的diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染结果newVnode，此过程成为patch.
diff过程整体遵循深度优先、同层比较的策略；两个节点之间比较会更具它们是否拥有子节点或者文本节点做不同操作；
比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试；

        如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；

借助key通常可以非常准确的找到相同节点，因此整个patch过程非常高效。

51、你了解哪些Vue性能优化方法

        (1).路由懒加载

        (2).keep-alive缓存页面

        (3).使用v-show 复用DOM

              v-for 遍历避免同时使用v-if
        (4).长列表性能优化

             如果列表是纯粹的数据展示，不会有任何变化，就不需要做响应化

             如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容

        (5).事件的销毁

             Vue组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。

        (6).图片懒加载

             对于图片过多的页面，为了加载页面速度加速。所以很多时候我们需要将页面内未出现在可是区域内的图片先不做加载，等到滚动到可视区域后再去加载。

        (7).第三方插件按需引入

             像element-ui这样的第三方组件库可以按需引入，避免体积较大。

        (8）.无状态的组件标记为函数式组件

        (9).子组件分割

            变量本地化
        (10).服务端渲染 - SSR

52、你对Vue3.0的新特性有没有了解？

更快
(1).虚拟DOM重写

(2).优化slots的生成

(3).静态树提升

(4).静态属性提升

(5).基于Proxy的响应式系统

更小
(1).通过摇树优化核心库体积

更容易维护
(1).TypeScript + 模块化

更加友好
(1).跨平台：编译器核心和运行时核心与平台无关，使得Vue更容易与任何平台一起使用

更容易使用
(1).改进的TypeScript支持，编辑器能提供强有力的类型检查和错误及肩高