vue面试题

给组件绑定自定义事件无效怎么解决？

加上修饰词.native。

在Vue事件中是如何使用event对象的？

@click="handleOpen" 默认第一个参数传入event对象;
@click="handleOpen(0, $event)",如果自己需要传入参数和event对象，则需要使用$event来获取event对象并传入handleOpen。

写出你知道的表单修饰符和事件修饰符

事件修饰符

.stop：阻止事件传递；
.prevent：阻止默认事件；
.capture ：在捕获的过程监听，没有capture修饰符时都是默认冒泡过程监听；
.self：当前绑定事件的元素才能触发；
.once：事件只会触发一次；
.passive：默认事件会立即触发，不要把.passive和.prevent一起使用，因为.prevent将不起作用。

表单修饰符.number .lazy .trim

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

v-show，切换元素的display属性,来控制元素显示隐藏，初始化会渲染，适用频繁显示隐藏的元素,不能用在<template>上；

v-if，通过销毁并重建组件，来控制组件显示隐藏，初始化不会渲染，不适用频繁显示隐藏的组件，可以用在<template>上。

你知道style上加scoped属性的原理吗？

vue通过在DOM结构以及css样式上加上唯一的标记data-v-xxxxxx，保证唯一，达到样式私有化，不污染全局的作用。

Vue在created和mounted这两个生命周期中请求数据有什么区别呢？

在created中，页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态，DOM节点没出来，无法操作DOM节点。在mounted不会这样，比较好。

v-if和v-for的优先级是什么？

vFor 的优先级其实是比 vIF 高的，所以当两个指令出现来一个DOM中，那么 vFor 渲染的当前列表，每一次都需要进行一次 vIf 的判断。而相应的列表也会重新变化，这个看起来是非常不合理的。

使用key要什么要注意的吗？

不要使用对象或数组之类的非基本类型值作为key，请用字符串或数值类型的值；

不要使用数组的index作为key值，因为在删除数组某一项，index也会随之变化，导致key变化，渲染会出错。

例：在渲染[a,b,c]用 index 作为 key，那么在删除第二项的时候，index 就会从 0 1 2 变成 0 1（而不是 0 2)，随之第三项的key变成1了，就会误把第三项删除了。

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

是一种只需要将单个页面加载到服务器之中的web应用程序。当浏览器向服务器发出第一个请求时，服务器会返回一个index.html文件，它所需的js，css等会在显示时统一加载，部分页面按需加载。url地址变化时不会向服务器在请求页面，通过路由才实现页面切换。

优点：

良好的交互体验，用户不需要重新刷新页面，获取数据也是通过Ajax异步获取，页面显示流畅；
良好的前后端工作分离模式。

缺点：

SEO难度较高，由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势。
首屏加载过慢（初次加载耗时多）

说说你对Proxy的理解

通俗来说是在对目标对象的操作之前提供了拦截，对外界的操作进行过滤和修改某些操作的默认行为，可以不直接操作对象本身，而是通过操作对象的代理对象来间接来操作对象。

let proxy = new Proxy(target, handler)

target 是用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）;
handler 一个对象，其属性是当执行一个操作时定义代理的行为的函数，也就是自定义的行为。

Object.defineProperty和Proxy的区别

Object.defineProperty

不能监听到数组length属性的变化；
不能监听对象的添加；
只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。

Proxy

可以监听数组length属性的变化；
可以监听对象的添加；
可代理整个对象，不需要对对象进行遍历，极大提高性能；
多达13种的拦截远超Object.defineProperty只有get和set两种拦截。

你认为Vue的核心是什么？

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

以上是官方原话，从中可以得知Vue的核心是模板语法和数据渲染。

什么是MVVM？

参考文献

MVVM是Model-View-ViewModel的缩写
Model代表数据模型，也可以在Model中定义操作数据变化的业务逻辑
View代表UI视图，它负责将数据模型转化成UI展现出来
ViewModel监听Model中数据的改变和控制View层的展现
在MVVM架构下，View和Model没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反映到View上
ViewModel通过双向数据绑定把View层和Model层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

计算属性

为什么要使用计算属性?

答：避免在模板中放入太多的逻辑，导致模板过重且难以维护。

计算属性有什么特性？

答：计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值。

动态绑定class和style

<template>
  <div>
  <!--第一种对象语法 -->
  <div class="test" :class="{
  	active: actived ,
  	'active-click': clicked && actived
  }"></div>
  <!-- 第二种数组语法 -->
  <div class="test" :class="[
  	actived? activeClass : '', 
  	clicked && actived ? activeClickClass : ''
  ]"></div>
  <!-- 第三种对象和数组混合 -->
  <div :class="[
  	testClass , 
  	{active: actived} , 
   	{'active-click': clicked && actived}
  ]"></div>
  <!-- 第四种对象和计算属性(推荐) -->
  <div :class="classObject"></div>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                actived: true,
                clicked: true,
                testClass: 'test',
                activeClass: 'active',
                activeClickClass: 'active-click',
            }
        },
        computed: {
            classObject: function() {
                return {
                    test: true,
                    active: this.actived,
                    'active-click': this.actived && this.clicked,
                }
            }
        },
    }
</script>

Array.from()有什么作用，和数组扩展运算符有什么区别。

Array.from()方法用于将两类对象转为真正的数组，第一类是类数组，第二类是可遍历（Iterator）对象。

而数组扩展运算符只能将可遍历（Iterator）对像，转成真正的数组。

//类数组一般含有length属性
let obj={
    '0':'a',
    '1':'b',
    length:3,
}
console.log(Array.from(obj))//["a", "b", undefined]
console.log(...obj)//Found non-callable @@iterator

Array.of()有什么作用，和Array()有什么区别

Array.of()方法用将一组值转换为数组。比Array()稳定，不会因参数个数的不同会导致结果有差异。

Array.of(1,2,3); //[1,2,3]
Array(1,2,3); //[1,2,3]
Array.of(3); //[3]
Array(3); //[ , , ]
Array.of(); //[]
Array(); //[]

vue相关面试题整理