Vue高频面试题三

一、v-on可以监听多个方法吗？

v-on可以监听多个方法，例如：
<input type=“text” :value=“name” @input=“onInput” @focus=“onFocus” @blur=“onBlur” />
但是同一种事件类型的方法，vue-cli工程会报错，例如：
<a href=“javascript:;” @click=“methodsOne” @click=“methodsTwo”>

二、Vue 组件 data 为什么必须是函数（必会）

1、每个组件都是 Vue 的实例，
2、组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他，
3、组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果。

三、Vue-loader 是什么？使用它的用途有哪些？（必会）

Vue-loader 会解析文件，提取出每个语言块，如果有必要会通过其他 loader处理，最后将他们组装成一个 commonjs 模块；module.exports 出一个 Vue.js 组件对象；
1）< temlate>语言块
（1）默认语言：html
（2）每个.Vue 文件最多包含一个< template>块
（3）内容将被提取为字符串，将编译用作 Vue 组件的 template 选项；
2）< script>
（1）默认语言：JS（在监测到 babel-loader 或者 buble-loader 配置时，自动支持 ES2015）
（2）每个.Vue 文件最多包含一个< script>块
（3）该脚本在类 CommonJS 环境中执行（就像通过 webpack 打包的正常 JS 模块）。所以你可以 require()其他依赖。在 ES2015 支持下，也可以使用 import跟 export 语法
（4）脚本必须导出 Vue.js 组件对象，也可以导出由 Vue.extend()创建的扩展对象；但是普通对象是更好的选择；
3）< style>
默认语言：css
1、一个.Vue 文件可以包含多个< style>标签
2、这个标签可以有 scoped 或者 module 属性来帮助你讲样式封装到当前组件；具有不同封装模式的多个< style>标签可以在同一个组件中混合使用
3、默认情况下，可以使用 style-loader 提取内容，并且通过< style>标签动态假如文档的< head>中，也可以配置 webpack 将所有的 styles 提取到单个CSS 文件中；
4）自定义块
可以在.Vue 文件中添加额外的自定义块来实现项目的特殊需求；例如< docs>块；Vue-loader 将会使用标签名来查找对应的 webpack loaders 来应用到对应的模块上；webpack 需要在 Vue-loader 的选项 loaders 中指定；Vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译HTML 模板语言，
通过设置语言块的 lang 属性：

简单的说，他就是基于webpack的一个的loader，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理，核心的作用，就是提取，划重点。

四、vue组件中写 name 选项有什么作用？（必会）

1. 项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤；
   2.DOM 做递归组件时需要调用自身 name；
2. Vue-devtools 调试工具里显示的组见名称是由 Vue 中组件 name 决定的。

五、Vue 的最大的优势是什么

首先解释vue的基本概念，然后对比其他框架，介绍vue的特点和优势，不要看到最大就只说一个优势点。
Vue 作为一款轻量级框架、简单易学、数据绑定、组件化、数据和结构的分离、虚拟 DOM、运行速度快，并且作者是华人尤雨溪，对应的 API 文档对国内开发者优化，作为前端开发人员的首选入门框架，Vue 有很多优势：
Vue.js 可以进行组件化开发，使代码编写量大大减少，读者更加易于解。
Vue.js 最突出的优势在于可以对数据进行双向绑定。
相比传统的页面通过超链接实现页面的切换和跳转，Vue 使用路由不会刷新页面。
Vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 dom，这样大大加快了访问速度和提升用户体验。
而且他的第三方 UI 组件库使用起来节省很多开发时间，从而提升开发效率。

六、vue中子组件调用父组件的方法

通过v-on 监听 和$emit触发来实现：1、在父组件中通过v-on监听当前实例上的自定义事件。2、在子组件中通{过}^{\prime }$emit’触发 当前实例上的 自定义事件。

七、v-show 和 v-if 指令的共同点和不同点?（必会）

1）相同点：
v-show 和 v-if 都能控制元素的显示和隐藏。
2）不同点：
实现本质方法不同
v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素
3）编译的区别
v-show 其实就是在控制 css
v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部
的事件监听和子组件
4）编译的条件
v-show 都会编译，初始值为 false，只是将 display 设为 none，但它也编译了
v-if 初始值为 false，就不会编译了
5）性能比较
v-show 只编译一次，后面其实就是控制 css，而 v-if 不停的销毁和创建，
故 v-show 性能更好一点。
注意点：因为 v-show 实际是操作 display:" "或者 none，当 css 本身有 display：none 时，v-show 无法让显示
总结（适用场景）：如果要频繁切换某节点时，使用 v-show（无论 true 或者 false初始都会进行渲染，此后通过 css 来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用 v-if（因为懒加载，初始为 false时，不会渲染，但是因为它是通过添加和删除 dom 元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）

八、什么是vue.js中的自定义指令？

自定义一些指令对底层DOM进行操作。

Vue里面有许多内置的指令，比如v-if和v-show，这些丰富的指令能满足我们的绝大部分业务需求，不过在需要一些特殊功能时，我们仍然希望对DOM进行底层的操作，这时就要用到自定义指令。

九、如何在vuex中使用异步修改？

在调用vuex中的方法action的时候，用promise实现异步修改

const actions = {
asyncInCrement({ commit }, n){
return new Promise(resolve => {
setTimeout(() => {
commit(types.TEST_INCREMENT, n);
resolve();
},3000)
})
}
}

十、vue如何禁止弹窗后面的滚动条滚动？

methods : {//禁止滚动stop(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow=‘hidden’;
document.addEventListener(“touchmove”,mo,false);//禁止页面滑动},/取消滑动限制/move(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow=‘’;//出现滚动条
document.removeEventListener(“touchmove”,mo,false);}
}