web前端常见面试题整理之vue框架

Vue

1.简介

• Vue.js是一个轻巧、高性能、可组件化的MVVM库，是一个构建数据驱动的 web 界面的渐进式框架。（渐进式框架的理解：没有多做职责之外的事，使用什么加什么）Vue.js 的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统
• MVVM(Model-View-ViewModel) 是一种软件架构设计模式, 是一种简化用户界面的事件驱动编程方式，源于MVC(Model-View-Controller)模式，MVVM的核心是数据驱动即ViewModel，ViewModel是View和Model的关系映射，ViewModel实现的方式是数据绑定
• vue两大特点：响应式编程、组件化

2.Vue的生命周期

• beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed
  created和mounted区别：
• created：实例创建后，这个阶段已经完成数据观测，属性和方法的运算，watch/event事件回调，mount挂载阶段还没有开始。$el属性目前不可见，数据并没有在DOM元素上进行渲染。
• Mounted：挂载之后调用，el选项的DOM节点被新创建的 vm.$el 替换，并挂载到实例上去之后调用此生命周期函数，此时实例的数据在DOM节点上进行渲染

3.v-show 与 v-if 区别

v-show是css切换，v-if是完整的销毁和重新创建。v-if是条件渲染，当false的时候不会渲染
根本区别在于DOM元素是否存在

4.绑定 class

• 行内 :style="{color: color, fontSize: fontSize+‘px’ }"
• 对象方法 :class="{‘active’: isActive}"
• 数组方法:class="[class1, class2]"

5.keep-alive

用来缓存组件数据， 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选 项还是局部/全局注册。能缓存数据的根本在于切换组件时没有重新创建
多了activated和deactivated两个生命周期函数
activated：当组件激活时，钩子触发的顺序是created->mounted->activated
deactivated: 组件停用时会触发deactivated，当再次前进或者后退的时候只触发activated

6.双向绑定的实现原理

• AngularJS实现方式：通过脏值检查的方式来比对数据是否变更，最简单的是通过计时器定时查询。
• vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。这也是为什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API，且无法通过 polyfill 实现）。

7.vue中data必须是一个函数

避免指向同一个引用地址，重用组件时产生冲突，而使用返回对象的函数，每次都会返回一个新对象

8.Vue组件通信

• prop $emit
• $children 父组件获取子组件的数据 返回的是个数组
• $refs：调用子组件时定义ref，这样就可以通过this.$refs获取所需要的数据
• $parent $parent用来访问父组件实例，通常父组件都是唯一确定的
• inheritAttrs
• $attrs
• vuex

9.vue-router有哪几种导航钩子？

一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。afterEach
第二种：组件内的钩子； beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate
第三种：单独路由独享组件beforeEnter

10. $route和 $router的区别

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

11.vue-router路由懒加载

方法一

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

方法二

const router = new Router({
  routes: [
   {
     path: '/foo',
     component: (resolve) => {
        require(['../components/foo'], resolve) 
     }
    }
  ]
})

方法三

const Foo= r => require.ensure([], () => r(require('../components/foo')), 'foo');
const router = new Router({
  routes: [
  {
    path: '/foo',
    component: Foo,
    name: 'foo'
  }
 ]
})

12.vue-router的实现原理，history和hash模式有什么区别？

• 监听hashchange来实现更新页面部分内容的操作，hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。
• hash模式：默认，带有#
• history模式：不带#，前端的URL必须和实际向后端发起请求的URL一致，否则刷新404

13.vue-loader是什么？使用它的用途有哪些？

解析.vue文件的一个加载器，跟template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等

14.$nextTick

vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

15.axios

axios是一个基于promise的HTTP库，支持promise的所有API，它可以拦截请求和响应，它可以转换请求数据和响应数据，并对响应回来的内容自动转换为json类型的数据；它安全性更高，客户端支持防御XSRF；

16.vue如何兼容ie

babel-polyfill插件

17.怎么解决vue打包后静态资源图片失效的问题

将静态资源的存放位置放在src目录下

18.页面刷新vuex被清空解决办法

localStorage 存储到本地再回去 重新获取接口获取数据

19.computed和watch有什么区别?

• computed是计算属性,也就是计算值,它更多用于计算值的场景
• computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算
• computed适用于计算比较消耗性能的计算场景
• watch更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作
  无缓存性，页面重新渲染时值不变化也会执行

20.vue如何优化首页的加载速度

• 第三方js库按CDN引入
• vue-router路由懒加载
• 静态文件本地缓存

21.Proxy

Proxy用于修改某些操作的默认行为，也可以理解为在目标对象之前架设一层拦截，外部所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对外部的访问进行过滤和修改。

• var proxy = new Proxy(target, handler);
• Proxy对象的所有用法，都是上面的这种形式。不同的只是handle参数的写法。其中new Proxy用来生成Proxy实例，target是表示所要拦截的对象，handle是用来定制拦截行为的对象。
• 可以将Proxy对象，设置到object.proxy属性，从而可以在object对象上调用。Proxy对象也可以作为其它对象的原型对象。

22.vue中 key 值的作用

在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 Diff 算法中 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。

23.Vuex的原理和使用方法

-Vuex可以被看作项目中所有组件的数据中心,我们将所有组件中共享的State抽离出来,任何组件都可以访问和操作我们的数据中心
Vuex的组成：一个实例化的Vuex.Store由state, mutations和actions三个属性组成:

• state中保存着共有数据
• 改变state中的数据有且只有通过mutations中的方法,且mutations中的方法必须是同步的
• 如果要写异步的方法,需要些在actions中, 并通过commit到mutations中进行state中数据的更改.

24.Vue与Angular以及React的区别

与angular相比

• 相同点：都支持指令，过滤器，双向绑定，都不支持低端浏览器
• 不同点：vue比angular轻量，简单，性能好

与react相比

• 相同点：React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，两者都需要编译后使用；中心思想相同，都提供合理的钩子函数
• 不同点：React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤