前端面试题（Vue篇）

一、Vue组件的scoped的作用

　　在style中加scoped属性，表示它的样式作用于当下模块，很好的实现样式私有化的目的

　　但是在很多时候我们都要对公共样式进行调整 但是写在scoped属性下无作用

解决方法：

　　1、混合型使用<style>/*全局样式*/</style>

　　　　　　　<style scoped>/*本地样式*/</style>

　　2、深度作用选择器 >>> 如果想在scoped中影响到子组件的样式可以使用 <style scoped>.a>>>.b{}</style>

 

二、v-on可以监听绑定多个方法？（可以）

　　一个元素绑定多个事件的写法：<button v-on='{click:clickBtn,mouseleave:mouseLeave}'>comeHere</button>

　　methods方法中：<button @click='a(),b()'>comeHere</button>

 

三、Vue中使用event对象

　　<button @click='Event($event)'>对象事件</button>

 

四、Vue中如何编写可复用组件

    https://blog.csdn.net/qq_38563845/article/details/77524934

 

　　   ①创建组件页面eg Toast.vue；
　　②用Vue.extend()扩展一个组件构造器,再通过实例化组件构造器,就可创造出可复用的组件
　　③将toast组件挂载到新创建的div上；
　　④把toast组件的dom添加到body里；
　　⑤修改优化达到动态控制页面显示文字跟显示时间

　　import Vue from 'vue';

　　import Toast from '@/components/Toast'; //引入组件

　　let ToastConstructor = Vue.extend(Toast) // 返回一个“扩展实例构造器”

　　let myToast = (text,duration)=>{ let toastDom = new ToastConstructor({ el:document.createElement('div') //将toast组件挂载到新创建的div上 })

　　document.body.appendChild( toastDom.$el ) //把toast组件的dom添加到body里

　　toastDom.text = text;

　　 toastDom.duration = duration;

　　// 在指定 duration 之后让 toast消失

　　setTimeout(()=>{

　　 　　 toastDom.isShow = false;

　　 }, toastDom.duration); }

　　export default myToast;

 

五、为什么Vue组件中data类型必须为函数？

　　因为在对象为引用类型，所以data不可以为对象，因为当有多个组件同时调用用一个对象的时候，当修改其中的一个属性值就会影响到其他组件的值

function 和 object 都为引用类型 但是function return出的对象是唯一性 object 如果一个值改变 那么其他组件引用的对象值也会改变（这个不是vue设计模式的问题 而是JS的特性所致）

 

六、Vue的生命周期

　　1、Vue的生命周期就是 Vue实例从创建到销毁的全过程

　　大可分为八个阶段  创建前/后 载入前/后 更新前/后 销毁前/后

　　　　　　　　　　开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程

　　2、页面第一次加载会触发的钩子函数

　　　　beforeCreate、created、beforeMounte、mounted

　　　　在mounted钩子中DOM渲染已经完全加载完成

　　3、钩子函数的具体使用方法

　　　　beforeCreate：可以加loading事件 在加载实例时触发

　　　　created：初始化完成时的事件可以写在这，如在这结束loading事件，异步请求也适合在这调用（DOM还未完全渲染完成所以不能直接进行DOM操作）

　　　　mounted：挂载元素，获取DOM节点（DOM已经完全加载完成）

　　　　updated：如果对数据统一处理，在这里写相应的函数

　　　　beforeDestroy：可以销毁一下用不倒的计时器或者中央事件 以免消耗性能以及影响其他组件使用

　　　　nextTick: 更新数据后可以直接进行DOM操作

 

七、v-if 和 v-show 的区别：

　　v-if：完整的销毁和重新创建

　　　　　条件渲染当判断条件是false是不渲染 页面也不会生成HTML标签

　　　　　（只显示一次时适用）

　　v-show：就是 css 的 display 的none 和 block 的切换

　　　　　　无论判断条件为true或者false 页面都会存在这个HTML标签 只是通过display控制显示与否

　　　　　　（频繁切换显示和隐藏时 适用）

 

八、动态绑定class的数组用法：

　　①、对象方法：v-bind:class="{'orange':isRipe,'green':isNoRipe}"

　　②、数组方法：v-bind:class="{class1,class2}"

　　③、行内：v-bind:style="{color:color,fontSize:fontSize+'px'}"

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

九、MVVM模式：

　　M--model 代表数据模型，也可以再model中定义数据修改和操作的业务逻辑

　　V--view 代表视图 UI组件，通过数据模型转换成UI显示

　　VM--viewmodel 监听模型数据的改变和控制视图能力、处理用户交互、就是同步model和view的对象

 

十、computed和watch的区别

　　computed：计算属性，更多用于处理复杂运算  且具有缓存性，computed值在getter执行后会缓存，只有在其依赖的属性值改变时才会重新调用getter进行计算

　　watch:监听属性 更多是观察作用 拥有两个参数 oldval newval 无缓存性 无论值有无变化都会执行 当数据变化时进行回调然后操作

 

十一、Vue常用的修饰符

　　

　　①、一般修饰符： v-model

　　　　　　.lazy --- v-model.lazy 在每次input事件触发后将输入框的值与数据进行同步，可以添加lazy修饰符从而转变为使用change事件进行同步

　　　　　　.number --- 只能输入数字

　　　　　　.trim --- 自动清除首尾的空格

　　②、事件修饰符：v-on

　　　　　　.stop --- 阻止单击事件继续传播

　　　　　　.@submit.prevent ---  提交事件不在重新加载页面

　　　　　　.once --- 只触发一次

　　③、按键修饰符：

 

　　④、系统修饰键：