前端面试题——vue篇

问题难度1

vue 中 v-if 和 v-show 的区别是什么

v-show 总是会进行编译和渲染的工作 - 它只是简单的在元素上添加了 display: none; 的样式。v-show 具有较高的初始化性能成本上的消耗，但是使得转换状态变得很容易。 相比之下，v-if 才是真正「有条件」的：它的加载是惰性的，因此，若它的初始条件是 false，它就不会做任何事情。这对于初始加载时间来说是有益的，当条件为 true 时，v-if 才会编译并渲染其内容。切换 v-if 下的块儿内容实际上时销毁了其内部的所有元素，比如说处于 v-if 下的组件实际上在切换状态时会被销毁并重新生成，因此，切换一个较大 v-if 块儿时会比 v-show 消耗的性能多。
总结:

• v-show总是会编译和渲染，通过display：none样式来实现，耗能低，转换状态容易
• v-if 加载惰性，初始值flase,无任何渲染和编译。true时才会渲染和编译，切换时销毁内部所有元素，耗能大。

vue中组件怎么通信

• 父传子：子组件通过props[‘xx’] 来接收父组件传递的属性 xx 的值
• 子传父：子组件通过 this.$emit(‘fnName’,value) 来传递,父组件通过接收 fnName 事件方法来接收回调
• 其他方式：通过创建一个bus，进行传值
• 使用Vuex

说出几种vue当中的指令和它的用法

• v-model 双向绑定
• v-on 绑定函数/事件
• v-html 解析HTML标签
• v-text 解析文本
• v-once 只执行一次渲染
• v-if 显示和隐藏
• v-show 显示内容
• v-bind 动态绑定
• v-for 循环数组
• v-bind:class 三种绑定方法
  • 对象型 ‘{red:isred}’
  • 三元型 ‘isred?“red”:“blue”’
  • 数组型‘[{red:“isred”},{blue:“isblue”}]’

vue更新数组时触发视图更新的方法

• push()；
• pop()；
• shift()；
• unshift()；
• splice()；
• sort()；
• reverse()

vue获取数据在一般在哪个周期函数

• created
• beforeMount
• mounted

vue 常用的修饰符?

• 事件修饰符

  • .stop 阻止事件继续传播 .prevent 阻止标签默认行为 .
  • capture使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 .
  • self 只当在 event.target是当前元素自身时触发处理函数
  • once 事件只会触发一次
  • passive 告诉浏览器你不想阻止事件的默认行为

• v-model 的修饰符

  • .lazy 通过这个修饰符，转变为在 change 事件再同步
  • .number 自动将用户输入值转化为数值类型
  • .trim自动过滤用户输入的收尾空格

问题难度2

vue3.0 中为什么要使用 Proxy，它相比以前的实现方式有什么改进

• 可以提高实例初始化启动速度，优化数据响应式系统，由全部监听改为惰性监听（lazy by default)。
• 数据响应式系统全语言特性支持，添加数组索引修改监听，对象的属性增加和删除。

如何获取dom

• 给dom元素加ref=‘refname’,然后通过this.$refs.refname进行获取dom元素

vue在双向数据绑定是如何实现的？

• vue双向数据绑定是通过数据劫持、组合、发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变
• 核心：关于vue双向数据绑定，其核心是Object.defineProperty()方法

分别简述computed和watch的使用场景

• 用官网的一句话来说，所有需要用到计算的都应该使用计算属性。多条数据影响一条数据时使用计算属性，使用场景购物车。
• 如果是一条数据更改，影响多条数据时，使用watch，使用场景搜索框。

created和mounted的区别

• created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
• mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

vuex有哪几种属性？

• state： 基本数据(数据源存放地)
• getters： 从基本数据派生出来的数据
• mutations ： 提交更改数据的方法，同步！
• actions ： 像一个装饰器，包裹mutations，使之可以异步。
• modules ： 模块化Vuex

vue路由跳转

• (一)声明式导航router-link

<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">  
<router-link :to="/home/:id">  
//传递对象
<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link> 

• (二)this.$router.push()

query传参

1.路由配置：
name: 'home',
path: '/home'
2.跳转：
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
3.获取参数
html取参: $route.query.id
script取参: this.$route.query.id

params传参

1.路由配置：
name: 'home',
path: '/home/:id'(或者path: '/home:id')
2.跳转：
this.$router.push({name:'home',params: {id:'1'}})
注意：
// 只能用 name匹配路由不能用path
// params传参数(类似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
3.获取参数
html取参:$route.params.id 
script取参:this.$route.params.id

Vue.js 双向绑定的原理

• Vue.js 2.0 采用数据劫持（Proxy 模式）结合发布者-订阅者模式（PubSub 模式）的方式，通过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
• Vue.js 3.0, 放弃了Object.defineProperty ，使用更快的ES6原生 Proxy (访问对象拦截器, 也称代理器

问题难度3

讲讲对vue 中 computed 的理解

vue 在创建 computed 属性时候，会循环所有计算属性，每一个计算属性会创建一个 watch，并且在通过 defineProperty 定义监听，在 get 中，计算属性工作是做依赖收集，在 set 中，计算属性重要工作是重新执行计算方法，因为 computed 是懒执行，也就是说第一次初始化之后，变不会执行计算，下一次变更执行重新计算是在 set 中。

Computed和Watch的区别

• computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的 属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。
• watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每 当监听的数据变化时都会执行回调进行后续操作。
• 运用场景：
  • 当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed的缓存特性,避免每次获取值时,都要重新计算。
  • 当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率, 并在我们得到最终结果前,设置中间状态。
  • 多个因素影响一个显示，用Computed；一个因素的变化影响多个其他因素、显示，用Watch;

axios是什么？

• 易用、简洁且高效的http库， 支持node端和浏览器端，支持Promise，支持拦截器等高级配置。

$route和$router的区别

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

Vuex 页面刷新数据丢失怎么解决？

• 需要做 vuex 数据持久化，一般使用本地储存的方案来保存数据，可以自己设计存储方案，也可以使用第三方插件。
• 推荐使用 vuex-persist (脯肉赛斯特)插件，它是为 Vuex 持久化储存而生的一个插件。不需要你手动存取 storage，而是直接将状态保存至 cookie 或者 localStorage中。

问题难度4

vue-loader 的实现原理是什么
vue文件的一个加载器，将template/js/style转换为js模块

用途:js可以写es6、style样式

作用：解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。