[JavaScript知识库]VUE面试题汇总（四）

往期点这里：↓
VUE面试题汇总（一）
VUE面试题汇总（二）
VUE面试题汇总（三）
31. v-model 语法糖的组件中的使用

参考答案：

<input type="text" v-model="mes"> 

此时mes值就与input的值进行双向绑定。

实际上上面的代码是下面代码的语法糖。

<input  v-bind:value="mes"  v-on:input="mes= $event.target.value"/>

要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，把最新的value传递给 mes。从而实现了v-model。

32. 十个常用的自定义过滤器

参考答案：
参考

33. vue 等单页面应用及其优缺点

参考答案：

优点：
1、用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染。
2、前后端职责业分离（前端负责view，后端负责model），架构清晰
3、减轻服务器的压力

缺点：
1、SEO（搜索引擎优化）难度高
2、初次加载页面更耗时
3、前进、后退、地址栏等，需要程序进行管理，所以会大大提高页面的复杂性和逻辑的难度

34. 什么是 vue 的计算属性？

参考答案：
先来看一下计算属性的定义：

当其依赖的属性的值发生变化的时，计算属性会重新计算。反之则使用缓存中的属性值。

计算属性和vue中的其它数据一样，都是响应式的，只不过它必须依赖某一个数据实现，并且只有它依赖的数据的值改变了，它才会更新。

35. vue 父组件如何向子组件中传递数据？

参考答案：props传参

36. 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);
    }
}

37. vue怎么实现页面的权限控制

参考答案：

利用 vue-router 的 beforeEach 事件，可以在跳转页面前判断用户的权限（利用 cookie 或 token），是否能够进入此页面，如果不能则提示错误或重定向到其他页面，在后台管理系统中这种场景经常能遇到。

38. $route和$router的区别

参考答案：$route 是路由信息对象，包括path，params，hash，query，fullPath，matched，name 等路由信息参数。

而 $router 是路由实例对象，包括了路由的跳转方法，钩子函数等

39. watch的作用是什么

参考答案：
watch 主要作用是监听某个数据值的变化。和计算属性相比除了没有缓存，作用是一样的。

借助 watch 还可以做一些特别的事情，例如监听页面路由，当页面跳转时，我们可以做相应的权限控制，拒绝没有权限的用户访问页面。

40. 计算属性的缓存和方法调用的区别

参考答案：

计算属性是基于数据的依赖缓存，数据发生变化，缓存才会发生变化，如果数据没有发生变化，调用计算属性直接调用的是存储的缓存值；

而方法每次调用都会重新计算；所以可以根据实际需要选择使用，如果需要计算大量数据，性能开销比较大，可以选用计算属性，如果不能使用缓存可以使用方法；

其实这两个区别还应加一个watch，watch是用来监测数据的变化，和计算属性相比，是watch没有缓存，但是一般想要在数据变化时响应时，或者执行异步操作时，可以选择watch