前端vue2面试题

1，vue使用的是什么模式？请具体介绍一下这种模式

答：渐进式开发，采用mvvm的模式

model (模型层) axios data vuex(state)

view (视图层) template < template>< /template>

viewmodel（传递者）是双向绑定实现的机制

延伸问题：什么是渐进式？Vue渐进式-先使用Vue的核心库，再根据你的需要的功能再去逐渐增加加相应的插件。（没有多做职责之外的事。）

2，数据渲染 有几种方式 有什么区别？**

答：{{}} == 等价于v-text

v-html:只有v-html可以渲染HTML代码

v-text

3,v-if和v-show有什么区别，切换时组件触发那些生命周期钩子函数？

v-if控制的是dom的销毁和创建
v-show只是控制dom的css中 display属性
触发的生命周期 v-if 显示：创建  挂载 隐藏：销毁
v-show显示隐藏不触发生命周期钩子函数

4，v-if和v-for为什么不建议混合使用

被渲染的dom会重复一个创建销毁的过程v-for的优先级比v-if高，
哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表会影响性能，所以，我们可以把他们改为计算属性：
computed：{

        activeClass:function(){
​
                this.users.filter(function(user)){
            
                        return user.isActive
                }
        }
}

5，vue中如何自定义指令（全局和局部）

全局的：参数一:指令调用的dom对象，参数二:指令对象，获取相应的传值信息
​
Vue.directive('color',function(ele,obj){
  if(obj.value%2==0){
      ele.style.backgroundColor='red';
  }else{
      ele.style.backgroundColor='blue';
  }
})
​
局部的：
directive:{
    color:function(ele,obj){
        ele.style.backgroundColor='red';
    }
}
​
问题延伸：自定义指令的钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
 <div id="app">     
        <p v-color="msg">{{msg}}</p>
        <p>
            <input type="text" v-model = "msg" name="">
        </p>
        <button @click='gai'>改值</button>
    </div>
    <script type="text/javascript">
        let vm = new Vue({
            el : '#app',
            data : {
                msg : "hello"
            },
            methods: {
                gai(){
                  this.msg='gaia'
                  console.log(99)
                }
            },
            directives:{
                color:{
                    bind: function (ele) {
                        console.log('sfref')
                        
                        ele.style.backgroundColor='red';
                    },
                    inserted: function (el) {
                        console.log('insetr')
                    },
                    update: function (el) {
                        console.log('update')
                        console.log(el.innerHTML)
                    },
                    unbind: function (el) {
                        console.log('unbind,销毁')
                    }
                }
            },
    
        });
    </script>
​

6，vue中常用的指令有哪些

V-text：主要用来更新textContent，可以等同于JS的text属性
V-html：双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
V-show：也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。
V-if：可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
V-else-if：充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。
V-else：是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
V-on：主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。@
V-bind：用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
v-for：用v-for指令根据遍历数组来进行渲染
V-model：这个指令用于在表单上创建双向数据绑定
V-slot 插槽
V-pre：主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
V-cloak：这个指令是用来保持在元素上直到关联实例结束时进行编译。
V-once：v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
​

v-pre:

//跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑
​
<span v-pre>{{ this will not be compiled }}</span>显示的是{{ this will not be compiled }}
<span v-pre>{{msg}}</span>     即使data里面定义了msg这里仍然是显示的{{msg}}

v-cloak:

//当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。
//我们可以使用 v-cloak 指令来解决这一问题。(解决屏幕闪动问题)
<div id="app" v-cloak>
    {{context}}
</div>

v-once:

<div id="app">
        <p v-once>{{msg}}</p>  //msg不会改变,只会在页面加载的时候，加载，不会被更新
        <p>{{msg}}</p>
        <p>
            <input type="text" v-model = "msg" name="">
        </p>
    <button v-on:click="cha">Greet</button>
    </div>
    <script type="text/javascript">
        let vm = new Vue({
            el : '#app',
            data : {
                msg : "hello"
            },
                methods:{
                cha(){
                    this.msg='asfsdfs'
                }
            }
        });
    </script>

7，计算属性和实例方法有什么区别？

答：计算属性有缓存，实例方法没有缓存
   计算属性调用时 total 不可以传参 实例方法调用时 total（）可以传参
   computed/methods

8，如何声明一个过滤器（全局的和局部的）

//过滤器，就是将数据被渲染到视图之前进行格式化处理，而不会修改作用域中原有的数据
//原则是：左值右量（变量也可以不写）
vue.filter(‘gettime’,function(date){
        Var time=new date(date)
        Return time.getFullyear()+’/’+time.getMonth()+1’/’+getDate()
})
​
filters:{
        Gettime(date){
            Var time=new date(date)
            Return time.getFullyear()+’/’+time.getMonth()+1’/’+getDate()
        }   
}

9,你用过那些v-model修饰符？

答：.lazy文本框失去焦点后在更新数据
    .trim清除前后空格的
    .number从字符中获取数字

10,你知道那些事件修饰符

答：.stop阻止事件冒泡
    .once只执行一次，一次性事件
    .self阻止事件冒泡和事件捕获
    .captrue事件捕获阶段触发
    .prevent阻止浏览器默认行为
    .native 触发原生事件

11,怎样声明全局组件，怎样使用全局组件

答：Vue.component（‘myHeader’,{
         Template:` <div>全局组件</div>`
    }）
    <my-header></my-header>

12,怎样声明局部组件，怎样使用局部组件

   答：声明成 ***.vue文件中模板在<template></template>中。
   Js模块化导出<script></script>
   css<style scoped></style>
   定义  import引入 注册components 调用

13,父子组件怎样实现通讯？

   答：父传子：父组件：<mydiv :list='list'> </mydiv>
      子组件：props[‘list’]
      子传父：子组件：this.$emit(‘子组件事件名’，参数)//打电话
      父组件：<mydiv @子组件事件名=‘父组件事件名’></mydiv>

14,非父子组件之间如何传递参数？

答：bus总线
   兄弟组件可以父传子 子传父 pass
   Vuex也可以实现数据共享(官方推荐使用vuex)
   sessionStorgey，

15，怎样使用props限定传递的数据，有哪些属性？

答：type //限定传递的数据类型
    Required:true false //是否必传
    Default:false //指定默认值
    // 自定义验证函数
    validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
     } 

16，解释VUE中单向数据流的概念

 答：子组件不可以直接修改父组件传过来的参数，如果直接修改会报错，只能声明成自己的才可以修改
     注：this.$parent.title，可以修改父组件传过来的值
​
     

17，vue有哪些插槽，如何使用

答：
默认插槽：能够接受组件外部传给组件大段的HTML代码 <slot></slot>
具名插槽：具有name属性的插槽 可以结合template标签的slot属性，定向给插槽传递内容
作用域插槽：插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。
          原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。
          slot-scope就相当于是一个对象，这个对象里面的数据就是子组件插槽绑定传上来了。

18，vue**中怎样实现组件之间的嵌套**

答：组件之间的嵌套使用，可以借助插槽，让插槽接受子组件中的内容

19，vue**中怎样操作dom**

答：ref=’name’
This.$refs.name
​
this.$refs
​
document.getbyid（）

20，vue怎样监听数据的变化，怎样监听一个对象属性的变化

答：watch,深度监听，deep:true

21，vue中生命周期钩子函数有哪些，请写出语法

答： 创建前beforeCreate       创建后created（请求axios）
    挂载前beforeMount        挂载后mounted（也可以请求axios）
    更新前beforeUpdate       更新后updated 
    销毁前beforeDestroy      销毁后destroyed 
    注：默认加载组件时候，会执行哪几个

22，挂载和创建之间的区别

答：创建之后只可以访问数据不可以操作dom 
   挂载之后可以访问数据可以操作dom

23，keep-alive组件有什么作用？

 答：缓存组件缓存页面，动态组件，router-view等
    它提供了include与exclude两个属性，允许组件有条件地进行缓存。
    例如：
        <keep-alive>
             <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      属性使用：
      
      只缓存组件别名name为a的组件
      <keep-alive include="a">
            <component></component>
       </keep-alive>
       
       除了name为a的组件，其他都缓存下来
       <keep-alive exclude="a">
            <component></component>
        </keep-alive>
​

24，vue.nextTick方法有什么用？

 答：数据更新是一个 异步操作异步dom更新后使用vue.nextTick可以立即得到更新后的 数据
    简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，
    注意：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。                  $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，
    
    Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
    2、当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它
    
    例如：
      created(){
            let that=this;
            that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
                that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
            });
          },
         
​

25，vue实现双向数据绑定的原理是什么？

答：当一个vue实例创建后vue会便利data选项的属性，用object.defineProperty将他转化为getter或者setter，并且内部追踪相关依赖，在属性访问和修改时通知变化
每一个组件实例化都有相应的watcher程序实例，他会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时会通知watcher重新计算，从而使得它相关的组件的以更新
举例说明：
<body>
    <p id='p1'></p>
    <input type='text' id='input1' name='input1'>
</body>
<script>
    var p1 = document.getElementById('p1');
    var inpu1 = document.getElementById('input1');
    var obj = {
        name:'数据'
    }
    p1.innerHTML=obj.name
    inpu1.value=obj.name
    Object.defineProperty(obj,'name',{
        set:function(newdata){
            p1.innerHTML=newdata
            console.log('设置name')
        },
        get:function(newdata){
            console.log('获取name')
        }
    })
    input1.οnchange=function(){
        obj.name=inpu1.value
    }
</script>

26，什么是vue全局事件解绑？

在vue中，写在methods里面的方法，在页面切换时一般就自动销毁了，
但是写在window上的事件，需要我们手动解绑，也是为了提高代码执行效率，
使用生命周期函数Destroy，在页面离开时执行解绑，
或者有定时器，也需要在 bofordestroy销毁事件中销毁，清除

27，$set 方法有什么用？ 有什么特点？

$set是用于设置对象属性的。对于没有声明的属性,直接用赋值的方法,this.xxx= yyy,视图是不会更新的
使用$set ，视图才会更新
​
this.list.num = 888; //不生效
​
this.$set(this.list,'num','888')//
​
forEach(){
    obj['sex'] = 'NAN'
    
}
​

28，路由显示区域和路由跳转 分别是哪个组件？

答:显示：router-view   跳转 router-link <=> a  tag=“span”？ to=“path” **active-class**
 

29，路由中怎样传递和接收参数（单个 多个参数） window.localtion.href=""

30，active-class的作用

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；
使用方式：
1、直接在路由js文件中配置linkActiveClass
    export default new Router({
      linkActiveClass: 'active',
    })
2、在router-link中写入active-class
    <router-link to="/home" class="menu-home" active-class="active">首页</router-link>

31，vue-router有哪几种导航钩子 分别是什么？

答：
全局
    前置router. beforeEach
    后置router. afterEach
路由独享的
    前置beforeEnter
组件内
    beforeRouteEnter(to, from, next){
    //在渲染该组件的对应路由被confirm 前调用
    beforeRouteUpdate(to, from, next) {
        //在当前路由改变，但是依然渲染该组件是调用
    }，
    beforeRouteLeave(to, from ,next) {
        //导航离开该组件的对应路由时被调用
    }

32，路由懒加载怎么实现，有什么意义

答：let Addclass = resolve =>require([' @/views/Addclass' ] ，resolve )  

33，Vue项目性能优化?

代码减少对服务器请求次数** **减小对服务器** **请求代码的体积
v-if 和 v-show选择调用
为item设置唯一key值
减少watch的数据
全局事件解绑函数节流函数防抖
Keep- alive缓存
css精灵图字体图标
spa单页应用图片(数据)懒加载<!--使用前需先安装配置vue-lazyload-->
路由懒加载
Webpack打包压缩代码

34，vue路由模式有哪几种，怎样切换有什么区别

 答：hash,history
 (1 )在url显示: hash有# ; history 无#对seo比较友好
 (2)回车刷新: hash可以加载到hash值对应页面; history 一般就是404掉了
 (3 )支持版本: hash支持低版本浏览器和IE浏览器 ; history,HTML5新推出的API不支持ie低版本

35,vue组件中的data为什么必须是一个函数

答： 如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

36,$route和$router有什么区别

$route是路由信息对象”，包括path, params， hash， query， matched, name 等路由信息参数。
​
而$router是“路由实例"对象包括了路由的跳转方法，钩子函数等

37,vue如何兼容ie

插件 最低兼容得到ie9  babel-polyfill 
https://blog.csdn.net/XuM222222/article/details/81561890

38,V-on 是都可以监听多个方法 怎样 实现？

39,开发环境与生产环境的区分

//process.env.NODE_ENV 
if` `(process.env.NODE_ENV === ``"development"``) {
  ``alert(``"开发环境"``);
    baseurl = "https://www.baidu.com"
}``else` `{
  ``alert(``"生产环境"``);
    baseurl = "https://www.test.com"
}

40,什么情况会使用到vuex vuex有哪些核心的属性？

state => 基本数据 
getters => 从基本数据派生的数据 （Getter相当于vue中的computed计算属性）
mutations => 提交更改数据的方法，同步！ （commit）
actions => 像一个装饰器，包裹mutations，使之可以异步。 （dispath）
modules => 模块化Vuex
​
如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”这种很长的写法，那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；

1, dataScrSetupFlag: true, //总数据总览总设置开关(设置一些开关等，到达一些样式变化的效果)

2，项目的产品的一些配置信息

3，userName: '', // 重置密码之后的 用户名密码 跳转登陆的时候填入

4，api接口路径：http://baidu.com

5,用户信息的存储(token),购物车数据的存储等

https://www.cnblogs.com/ldlx-mars/p/7908950.html

https://www.cnblogs.com/chaoyuehedy/p/9931146.html

vuex的缺点：

vuex没有持久化存储的手段，每次刷新都会重置所有的数据

41，vue中key的作用

diff算法，使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
所以一句话，**key的作用主要是为了高效的更新虚拟DOM**。
另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，
否则vue只会替换其内部属性而不会触发过渡效果。

42，Diff算法 的运行机制？

概念: diff算法是一种优化手段，将前后两个模块进行差异对比，修补(更新)差异的过程叫做patch(打补丁)
​
通俗的讲，当前层级的dom 先进行对比，如果发现异同  就更新当前dom 和 它的子节点

<!--为什么vue,react这些框架中都会有diff算法呢? 我们都知道渲染真实dom的开销是很大的，这个跟性能优化中的重绘重排意义类似, 回到正题来, 有时候我们修改了页面中的某个数据，如果直接渲染到真实DOM中会引起整棵数的重绘重排, 那么我们能不能只让我们修改的数据映射到真实DOM, 做一个最少化重绘重排呢-->

注：Key值唯一  提高虚拟dom的对比效率
问：Key值的作用 为什么最好不要用index?？？
 Index 索引可以随着队列的操作发生变化 不利于虚拟dom之间的对比
 [
    [id:004,小李]     0
    [id:001,小明]     1
    [id:002,小红]     2
    [id:003,小花]     3
 ] 

总结
​
- 尽量不要跨层级的修改dom
- 在开发组件时，保持稳定的 DOM 结构会有助于性能的提升
- 设置key可以让diff更高效

43，axios

axios，是基于Promise的http库，用来实现浏览器请求服务器的工具  
 从浏览器中创建 XMLHttpRequests
 从 node.js 创建 http 请求
 支持 Promise API
 自动转换 JSON 数据 
 客户端支持防御 XSRF
#### axios 的语法
 get，请求的方式，如果表单请求，请使用post
 url，请求的文件地址
 then，请求成功时的回调函数
 catch，请求失败时的回调函数
 
 aysnc   awit

44,axios 数据请求

post请求，需要qs序列化
​
​
当axios请求为post，表单提交时，header需要设置content-type为application/x-www-form-urlencoded，
放在body体的参数格式为
 requestbody
{
    name:xxx,
    age:xxx
}，
后台就接收不到参数
这时就需要将参数序列化，用qs序列化参数（qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.），qs.stringify(parmas),转完之后的格式为：formdata
 
name:xxx,
age:xxx