Vue面试题

Vue 面试题

1.对于MVVM的理解

MVVM分为Model、View、ViewModel三者。
Model：代表数据模型，数据和业务逻辑都在Model层中定义；
View：代表UI视图，负责数据的展示；
ViewModel：就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。
前段时间面试蚂蚁金服，面试官问我，比如UI中有一个li列表，它是怎么与我们的数据对应的，当时没明白他在问什么，现在想想应该是考察ViewModel。
Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。
简单的说，ViewModel就是View与Model的连接器，View与Model通过ViewModel实现双向绑定。

2.vue实现双向数据绑定的原理```

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

3.vue组件间参数传递是如何传递的

Vue.js父子组件的关系可以总结为props down，events up，父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息
1).父组件—>子组件：父组件传值给子组件使用Props属性
2).子组件—>父组件：子组件传值给父组件使用Emit事件。
非父子组件间的数据传递（兄弟组件传值）
1).eventBus(主要是现实途径是在要相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。)
2).当组件比较复杂需要传递的数据比较多的时候可以使用vuex来管理。

4.vue如何自定义一个过滤器

Vue.filter()方法用于在Vue.js中创建和注册自定义过滤器。 Vue.filter()方法接受两个参数：filterId，它是usnique名称，用于过滤创建的过滤器函数，以及一个过滤器函数，它将值作为参数并返回转换后的值。

5.v-if和v-show的区别

vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的。
实现本质方法区别
vue-show本质就是标签display设置为none，控制隐藏
vue-if是动态的向DOM树内添加或者删除DOM元素
编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
编译的条件
v-show都会编译，初始值为false，只是将display设为none，但它也编译了
v-if初始值为false，就不会编译了
性能
v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
用法
v-if更灵活

6.vue中常用的指令列举说明一下

1：v-text
用法：
<p v-text="message"></p>
功能类似于 <p>{{message}}</p>。区别是：当我们网速很慢或者javascript出错时，页面中会显示{{xxx}}。Vue指令v-text,就是解决这个问题的。
2：v-html
用法：
<span v-html="messageHtml"></span>
如果想要插入html标签，用v-text是输不出来的。这时候我们就需要用v-html标签了。双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。
需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
3：v-show 和 v-if
用法：
<p v-show="isTrue"> </p>
<p v-if="isTrue"> </p>
作用都是判断html中的DOM是否加载或者显示。
v-if 和 v-show 的区别：
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：控制的是css的display属性，可以使客户端操作更加流畅。
4：v-for
用法：
<div v-for="item in items">
{{ item.text }}
</div>
v-for就是解决多次渲染的数组，如：数组，对象等。项目中需要哪个html标签渲染，v-for指令就放在哪个标签上。
5：v-on
用法：
<div v-on:click="function()"> </div>
v-on 就是事件监听器，监听DOM事件触发一些js代码。
v-on的缩写： @ ，如： <div @click="function()"> </div>
还有一些修饰符:
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
6：v-bind
用法：
给img标签绑定src：
<img v-bind:src="imageSrc">
v-bind 的缩写语法：
<img :src="imageSrc">
作用：动态地绑定一个或多个特性，或一个组件 prop 到表达式，在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。
注意此时 class 和 style 绑定不支持数组和对象
7：v-model
用法：
<input type="text" v-model="modelText">
v-model 实现数据双向绑定，一般绑定在表单元素上，在表单控件或者组件上创建双向绑定。
8：v-pre
用法：
<span v-pre>{{ message }}</span>
在模板中跳过vue的编译，直接输出原始值。如：以上标签输出的结果是 {{message}}
9：v-cloak
用法：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
10：v-once
用法：
<span v-once>This will never change: {{msg}}</span>
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

7.vue中常用的事件修饰符有哪些.

.stop: 阻止事件冒泡；
.prevent: 阻止默认事件；
.capture: 实现捕获触发事件的机制 ;
.self: 实现只有点击当前元素时候，才会触发事件处理函数 ;
.once: 事件只触发一次；

8v-on绑定多个方法

v-on绑定多个方法：<p v-on="{click:dbClick,mousemove:MouseClick}"></p>
一个事件绑定多个函数：<p @click="one(),two()">点击</p>