前端八股文——Vue专题

VUE2系列

一、对于MVVM的理解

MVVM是Model-View-ViewModel的缩写

Model：代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑

View：代表UI组件，负责将数据模型转化成UI展现出来

ViewModel通过双向数据绑定把View层和Model层连接起来，而View和Model之间的同步工作完全是自动的，无需认为干涉，所以开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

二、Vue的生命周期（Vue2）

Vue2

beforeCreate（创建前）在数据观测和初始化事件还未开始

created（创建后）完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用，实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象，完成模板中的html渲染到html页面中，进行ajax交互。

beforeUpdate（更新前）在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后）在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM地操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致无限更新循环，该钩子在服务器渲染期间不可调用。

beforeDestroy（销毁前）在实例销毁之前调用，实例仍然完全可用。

destroyed（销毁后）在实例销毁之后调用。调用后，所有的事件监听器将会被移除，所有的子实例会被销毁。该钩子在服务器渲染期间不被调用。

三、Vue实现数据双向绑定的原理：

Object.defineProperty()

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式方式，通过Object.defineProperty()劫持各个属性的setter，getter,在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通JS对象传给Vue实例来作为它的data选项时，Vue将遍历它的属性，用Object.defineProperty将它们转为getter/setter。用户看不到getter/setter，但是内部让Vue追踪依赖，在属性被访问和修改时就通知变化。

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和watcher三者

Observer：监听自己model的数据变化

Compile:解析编译模板指令

watcher:搭起observer和compile之间通信桥梁，达到数据变化->视图更新

视图交互变化(input)->数据Model变更双向绑定效果

js实现简单的双向绑定：

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

四、Vue组件间的参数传递

1.父组件与子组件传值

父组件传给子组件，子组件通过props方法接受数据

子组件传给父组件，$emit方法传递参数

2.非父子组件间的数据传递，兄弟组件传值

eventBus事件总线，创建一个事件中心，相当于中转站，可以用来传递事件和接收事件。

Vuex

五、Vue的路由实现：hash模式和history模式

hash模式：在浏览器中符号”#”，#以及#后面的字符称之为hash，用window.location.hash读取

特点：hash虽然在URL中，但不被包括在HTTP请求中，用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

hash模式下，仅hash符号之前的内容会被包含在请求中，如http://www.xxx.com，因此对于后端来说，即使没有做到路由全覆盖也不会返回404

history模式：history采用HTML5的新特性，提供两个新方法pushState()/replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。history模式下，前端的URL必须和实际向后端发起请求的URL一致，如 http://www.xxx.com/items/id。后端如果缺少对items/id的路由支持就会返回404错误。

Vue-Router官网里如此描述：不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

六、Vue与Angular以及React的区别？

1.与AngularJS的区别

相同点：都支持指令：内置指令和自定义指令，都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器

不同点：AngularJS的学习成本高，增加Dependency Injection特性，而Vue.js本身提供的API都比较简单直观，在性能上，AngularJS依赖对数据做脏检查，所以watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有数据独立触发

2.与React区别

相同点：React采用特殊JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有约定，两者都需要编译后使用，中心思想相同：一切都是组件，组件之间可以互相嵌套；提供合理的钩子函数，可以让开发者定制化处理需求；都不内置AJX,Route到核心包，以插件的方式加载，在组件开发中都支持mixins的特性。

不同点：React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷操作Virtual DOM

七、VUE路由的钩子函数

首页可以控制导航跳转，beforeEach,afterEach等，一般用于页面title修改，一些需要登录才能调整页面的重定向功能。

beforeEach主要有三个参数，to from next

to:route即将进入的目标路由对象

from:route当前导航正要离开的路由

next:function一定要调用该方法resolve这个钩子，执行效果依赖next方法的调用参数，可以控制网页的跳转

八、Vuex是什么？如何使用？哪种功能场景使用？

只用来读取的状态集中放在Store中，改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。

在main.js引入store，注入，新建目录store,…export

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

state

Vuex使用单一状态树，即每个应用将仅仅包含一个store实例，但单一状态树和模块化并不冲突，存放的数据状态，不可以直接修改里面的数据。

mutations

mutations定义的方法动态修改Vuex的store中的状态或数据

getters

类似于vue的计算属性，主要用于过滤数据

action

actions可以理解为通过将mutations里面处理数据的方法变成可以异步处理数据的方法，简单来说就是异步操作数据，view层通过store.dispatch来分发action

const store = new Vuex.Store({ //store实例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

modules

项目复杂时，可以让每一个模块拥有自己的state mutation action getters，使得结构清晰方便管理

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

九、vue-cli新增自定义指令

1.创建局部指令

var app = new Vue({
	el:'#app',
	data:{
	},
	//创建指令（可以多个）
	directives:{
		//指令名称
		dir1:{
			inserted(el){
				//指令中第一个参数是当前使用指令的DOM
				console.log(el);
				console.log(arguments);
				//对DOM进行操作
				el.style.width = '200px';
				el.style.height = '200px';
                el.style.background = '#000';
			}
		}
	}
})

2.全局指令：

Vue.directive('dir2',{
	inserted(el){
		console.log(el);
	}
})

3.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

十、vue如何自定义一个过滤器？

html代码：

<div id="app">
	<input type="text" v-model="msg" />
	{{msg | capitalize}}
</div>

JS代码：

var vm =new Vue({
	el:'#app',
	data:{
		msg:''
	},
	filters:{
		capital
	}
})

全局定义过滤器

Vue.filter('capitalize',function (value){
	if(!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase()+value.slice(1)
})

过滤器接收表达式的值(msg)作为第一个参数，capitalize过滤器将会收到msg的值作为第一个参数

十一、对keep-alive的了解

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

在vue 2.1.0版本之后，keep-alive加入两个属性：inclue（包含的组件缓存）与excluede（排除的组件不缓存，优先级大于include）

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
	<component>
	//该组件是否缓存取决于include和exclude属性
	</component>
</keep-alive>

参数解释：

include - 字符串或正则表达式，只有名称匹配的组件会被缓存

exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存

include和exclude的属性允许组件有条件地缓存，二者都可以用”,”分隔字符串，正则表达式，数组。当使用正则或者是数组时，要记得使用v-bind

使用示例

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>

十二、一句话就能回答地面试题

1.css只能在当前组件起作用

在style标签中写入scoped即可，例如

前端八股文——Vue专题

前端八股文——Vue专题

VUE2系列

一、对于MVVM的理解

二、Vue的生命周期（Vue2）

Vue2

相关问题：

1.什么是Vue生命周期？

2.Vue生命周期的作用是什么？

3.Vue的生命周期总共有几个阶段？

4.第一次页面加载会触发哪几个钩子？

5.DOM渲染在哪个周期中就已经完成？

三、Vue实现数据双向绑定的原理：

Object.defineProperty()

四、Vue组件间的参数传递

五、Vue的路由实现：hash模式和history模式

六、Vue与Angular以及React的区别？

七、VUE路由的钩子函数

八、Vuex是什么？如何使用？哪种功能场景使用？

state

mutations

getters

action

modules

九、vue-cli新增自定义指令

1.创建局部指令

2.全局指令：

3.指令的使用

十、vue如何自定义一个过滤器？

十一、对keep-alive的了解

十二、一句话就能回答地面试题