2020 前端面试题上 vue篇

没有特别的幸运，那么就特别的努力！！！

2020 前端面试题上 vue篇

• vue篇
• vue 双向绑定原理
• v-model 的原理
• scoped样式穿透
• 组件之间的传值通讯
• axios拦截器怎么配
• 自定义指令
• vuex
• computed 和 watch区别
• filter与computed
• 计算属性——判断是否有图片
• v-if & v-show & v-for
• v-bind & v-mode
• vue生命周期
• $set , $get()
• trim 过滤首位空格
• 谈谈你对 keep-alive 的了解
• 组件中 data 为何是一个函数？
• vue 父组件调用子组件方法
• vue-router 路由模式有几种？
• 动态路由
• delete与vue.delete区别?
• Vue2.0 v-for 中 :key 到底有什么用？
• vue相对于jq好处，优势
• axios怎么作到同步
• ajax与axios的区别？
• sass与less区别
• 你都作过哪些Vue的性能优化？
• 结语

vue篇

Vue.js是一套构建用户界面的渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，而且很是容易学习，很是容易与其它库或已有项目整合。另外一方面，Vue 彻底有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

vue 双向绑定原理

Vue是采用数据劫持结合发布/订阅模式的方式，经过Object.defineProperty() 来劫持各个属性的setter，getter，而后通知订阅者，订阅者会触发它的update方法，对视图进行更新。

v-model 的原理

v-model是vue的一个语法糖,经过v-bind去单项绑定vue实例里面的data数据，而后再经过各类事件好比@change @input等去进行触发事件,从而达到修改实例数据的值

● text 和 textarea 元素使用 value 属性和 input 事件；
● checkbox 和 radio 使用 checked 属性和 change 事件；
● select 字段将 value 做为 prop 并将 change 做为事件

scoped样式穿透

*** 对于less或者sass等预编译，是不支持>>>操做符的，可使用/deep/来替换>>>操做符
方法一： deep

<style lang="less" scoped> .wrap /deep/ .box{
        background: red;
    }
</style>

方法二： 深度选择器

<style scoped> .parent >>> .child {
        background: red
      }
</style>

组件之间的传值通讯

1. 父组件给子组件传值经过props
2. 子组件给父组件传值经过$emit触发回调
3. 兄弟组件通讯，经过实例一个vue实例eventBus做为媒介，要相互通讯的兄弟组件之中，都引入eventBus
4. 多级组件传递数据，仅仅传递数据不作中间处理， a t t r s / attrs/ attrs/listeners
   $attrs 存放父组件中非绑定Props属性
   $listeners 存放父组件中绑定非原生事件
   
   
5. provide / inject API 主要解决了跨级组件间的通讯问题，
   主要是子组件获取上级组件的状态，跨级组件间创建了一种主动提供与依赖注入关系
   
6. 公共组件仓库vuex
   https://segmentfault.com/a/1190000019208626 参考组件传值6种
   

axios拦截器怎么配

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求以前作些什么
    return config;
}, function (error) {
    // 对请求错误作些什么
    return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据作点什么
    return response;
  }, function (error) {
    // 对响应错误作点什么
    return Promise.reject(error);
  })

自定义指令

经过directives指令，里面有几个钩子 最经常使用的就是bind，只调用一次执行初始化操做，它里面有两个参数 bind(el,binding){} el能够直接操做dom，binding一个对象，里面包含property一些属性。

directives:{ //自定义局部指令
      focus:{
           bind(el,binding){ },
            
           inserted(el,binding){
                 el.focus();
           }
      }
 }

vuex

vuex：模块化管理，至关于一个公共组将仓库
vuex五大核心属性：state，getter，mutation，action，module
事实上4个重要参数，module将 store 分割成模块，每一个模块包含上面4个参数，使得结构更加完善。

四个重要参数（state，getters , mutations , actions）
查-----> state (物质)-----存放数据 $store.state.XXX
查------> getters 特定的物质------ $store.getters.XX

改-------> mutations 仓库管理员-------- 惟一 改变数据state值
通常放同步数据，不推荐异步写法 且 只能单独改变
改-----> actions 仓库总监 不能之间改变数据，必须经过commit方法 提交给mutations，从而改变state值
异步处理，流程判断mount

运用：Actions
在mounted:{} 方 法 里 面 — — t h i s . 方法里面——this. 方法里面——this.store.dispatch(“getGoods”)
方法2：辅助函数——mapActions——mounted:{}$方法里面 直接this.getGoods()

computed 和 watch区别

computed-----计算属性 该属性是将数据挂载vue实例上 具备缓存 优势：避免重复计算
watch------监听 起 观察做用 监听已经挂载vue实例上的数据

filter与computed

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

计算属性——判断是否有图片

<img class="cImg" :src="formatFull(item.picture)" alt="">

computed: {
    formatFull() {
     return function(image) {
        if(image) {
          return ourl + image
        }else {
            return defaultImg
        }
      }
    }
  },

v-if & v-show & v-for

v-show / v-if
v-if判断条件少 v-show适用于频繁切换
v-if：直接操做dom树的新增和移除。
v-show隐藏则是为该元素添加css–display:none，dom元素还在。

当 v-if 与 v-for 一块儿使用时，v-for 具备比 v-if 更高的优先级。
解决方案：
v-for和v-if不该该一块儿使用，必要状况下应该替换成computed 计算属性，filter过滤。

v-bind & v-mode

v-bind:绑定属性： :style :src :class

<div :class="[Type==2?'timeDate active':'timeDate']">月</div>

v-mode:在表单控件或者组件上建立 双向绑定。(能够理解数据的双向绑定)
表单事件——@change，@input 实时触发，@click

vue生命周期

生命周期： Vue 实例从建立到销毁的过程，就是生命周期。
从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

beforeCreate 虚拟dom建立前 el，data都是undefined =>用于加入loading动画
created 虚拟dom建立完成，el是underfinded 而data（数据）是初始化 =>结束loading动画

beforeMount 元素挂载前， el，data已经初始化 =>虚拟dom解析， 数据未渲染
mounted 元素挂载后 => 对应的数据渲染完成

beforeUpdate 更新前
updated 更新后

beforeDestroy 销毁前 => 用于定时器的清除，事件销毁等
destroyed 销毁后

$set , $get()

vue中set用途——vue实例已经建立好了，有时候须要再次给数据赋值时，并不能在视图中改变
Vue.set(object,key,value) //设置，添加属性 data里面对象
//第一个操做对象，第二个键名，第三个键值

var vm=new Vue({
        el:'#itapp',
        data:{
            user:{
                id:1001,
                name:'tom'
            }
        },

this.$set(object,key,value)   //实例方法，添加属性（推荐）
    //this.$set(this.user,'age',25);

get()读取时会触发

trim 过滤首位空格

若是要自动过滤用户输入的首尾空白字符，能够给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

谈谈你对 keep-alive 的了解

keep-alive 是 Vue 内置的一个组件，可使被包含的组件保留状态，避免从新渲染

1. 用于缓存组件
2. 对应两个钩子函数 activated 和 deactivated ------当组件激活时触发activated,当组件移除时触发deactivated

组件中 data 为何是一个函数？

组件中data必须是一个函数,否则data里面的属性会相互影响
若是data是一个对象,这样做用域就没有隔离,子组件中的data会相互影响

vue 父组件调用子组件方法

父组件-------- this.$ref

//父组件
<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

//子组件
<template>
  <div>
    child
  </div>
</template>
 
<script>
  export default {
    name: "child",
    props: "someprops",
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>

vue-router 路由模式有几种？

默认hash

1. hash 支持全部浏览器,
   hash发生变化的url都会被浏览器记录下来,
   hashchange 事件来监听 hash 值的变化
   
   
2. History HTML5 提供了 History API 来实现 URL 的变化,
   URL中的#号就被去除了。
   可使用 popstate 事件来监听 url 的变化
   history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时咱们须要手动触发页面跳转（渲染）
   
   
   
3. abstract 支持全部 JavaScript 运行环境

动态路由

2种方案：

1. 后端处理，前端处理就比较方便，Router.addRoutes()
2. 前端处理，再路由界面添加属性meta:{}，再借助路由守卫（to，from，next）

delete与vue.delete区别?

delte会删除数组的值，可是它依然会在内存中占位置
而vue.delete会删除数组在内存中的占位

let arr1 = [1,2,3]
let arr2 = [1,2,3]
delete arr1[1]
this.$delete(arr2,2)
console.log(arr1)    //【1, empty, 3】
console.log(arr2)    //【1,2】

Vue2.0 v-for 中 :key 到底有什么用？

1.用 id 做为 key 就好了
2.永远不要用 index 做为 key
3. 经过这个key 咱们的diff操做能够更准确·更快速

vue相对于jq好处，优势

vue将数据层和视图层分离开。采用虚拟dom，减小了dom操做，(虚拟dom 是js对象模拟dom，在操做过程当中不会直接操做dom，等待虚拟dom操做完成，只改变开始时和结束时变化，这里面才有diff算法)
因此说 vue无论代码结构，操做性能，模块化，单页面运用都要优于jq

axios怎么作到同步

es7 async/await

ajax与axios的区别？

axios提供并发封装(同时进行多个请求，不在意返回顺序)，体积小
axios 是一个基于Promise 用于浏览器和 node 的 HTTP 客户端，本质上也是对原生XHR的封装

sass与less区别

a.编译环境不一样，sass在服务端处理，less在浏览器端处理
b.变量符号不同，less用@ sass用$
c.sass支持条件语句，less不支持

你都作过哪些Vue的性能优化？

尽可能减小data中的数据，data中的数据都会增长getter和setter，会收集对应的watcher
v-if和v-for不能连用
SPA 页面采用keep-alive缓存组件
使用路由懒加载、异步组件
防抖、节流
图片懒加载
第三方模块按需导入

结语

因为精力时间及篇幅有限，这篇就先写到这。你们慢慢来不急！！！
下篇内容我会写下
webpack相关配置，性能优化
js相关基础，闭包，原型，原型链，防抖，节流等
css一些相关样式
es6
浏览器
服务器，nginx等

在面试中，不少领域并无真正的答案，能回答到什么样的深度，仍是得靠本身真正的去使用和研究。

但愿能帮助到你们，同时祝愿你们在开发旅途中愉快！！！

拿着 不谢 请叫我“锤” ！！！