一、对于MVVM的理解？

MVVM是模型视图视图模型的缩写。

模型表示数据模型，也可以在模型中定义数据更改和操作的业务逻辑。 View表示UI组件，它将数据模型转换为UI并表示。 ViewModel拦截模型数据的更改，控制视图行为，并处理与用户的交互。 简单地说，它是一个将View与Model同步的对象，用于连接Model和View。 在MVVM体系结构中，View和Model之间没有直接联系，而是通过ViewModel进行交互。 由于模型和视图模型之间的交互是双向的，因此视图数据的变化与模型同步，模型数据的变化也将立即反映在视图中。

虽然ViewModel通过双向数据绑定连接了View层和Model层，但View和Model之间的同步工作是完全自动的，不需要人为干扰，因此开发人员只关注业务逻辑，不需要手动操作DOM

二、Vue的生命周期

beforeCreate (创建前)数据观测和初始化事件尚未启动

尚未显示“创建”、数据观测、属性和方法运算、初始化事件和$el属性

在装载开始之前调用beforeMount (加载前)，这是第一次调用相关的render函数。 实例配置为编译模板，并在html中生成data中的数据和模板。 请注意，此时页面上还没有挂载html。

在el被新创建的vm.$el替换并装载到实例中之后，将调用mounted (加载后)。 实例将el属性指向的DOM对象替换为在上面编译的html内容。 完成将模板中的html呈现到html页面。 在此过程中进行ajax对话。

在更新数据之前调用“beforeUpdate”(更新前)，并在重新渲染和修补虚拟DOM之前发生。 此挂接允许您进一步更改状态，而无需触发其他重新渲染过程。

在数据更改重新渲染和修补虚拟DOM后调用“更新”。 调用时，组件DOM已更新，因此可以执行依赖于DOM的操作。 但是，在大多数情况下，请避免在此期间更改状态，因为更新可能会出现无限循环。 在服务器端渲染期间不调用挂接。

“beforeDestroy”“销毁前”。 在实例被销毁之前调用。 实例仍然完全可用。

销毁后，将在销毁实例后调用destroyed。 调用时，将删除所有事件侦听器，也将销毁所有子实例。 在服务器端渲染期间不调用挂接。

1、什么是vue生命周期？

a )从创建到销毁Vue实例的过程是生命周期。 创建、初始化数据、编译模板、装载DOM渲染、更新-渲染、销毁等一系列过程称为Vue生命周期。

2、vue生命周期的作用是什么？

a )在其生命周期中有多个事件挂接，因此在控制整个Vue实例的进程时更容易形成更好的逻辑。

3、vue生命周期总共有几个阶段？

a )可分为创建前/创建后、加载前/加载后、更新前/更新后、销毁前/销毁后8个阶段。

4、第一页加载触发的钩子有多少个？

答：将触发以下各项： beforeCreate、created、beforeMount和mounted。

5、DOM渲染在哪个周期完成的？

答： DOM渲染已在mounted中完成。

基于

三、 Vue实现数据双向绑定的原理：Object.defineProperty()

vue的数据双向绑定主要采用数据劫持与发布者-订阅模型相结合的方式(Object.defineProperty ) )，通过各属性的setter，genery 将常规Javascript对象作为data选项传递到Vue实例时，Vue会遍历其属性，并使用Object.defineProperty ()将其转换为getter/setter。 用户看不到getter/setter，但内部会跟踪Vue的相关性，并在访问和修改属性时通知用户更改。

vue的数据双向绑定是以MVVM为数据绑定的入口，将Observer、Compile和Watcher三者集成，用Observer拦截自己model的数据变化，用Compile编译模板

js实现简单的双向绑定：

实体

div标识=’苹果’

input type=’text’ id=’txt ‘

p id=’show’/p

/div

/body

脚本类型

e=”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不会重加载页面。

history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

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

版本在不断更新，以下的区别有可能不是很正确。我工作中只用到vue，对angular和react不怎么熟。

1、与AngularJS的区别

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

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

2、与React的区别

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

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

七、vue路由的钩子函数

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

beforeEach主要有3个参数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.dispath 来分发 action。

const store =newVuex.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 =newVuex.Store({

modules:{

a: moduleA,

b: moduleB

})

九、其它小知识点

1、css只在当前组件起作用

答：在style标签中写入scoped即可 例如： <stylescoped></style>

2、v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；

3、$route和$router的区别

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

作者：沉静地闪光

https://segmentfault.com/a/1190000016344599

快三大小单双稳赚买法/h2>

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

beforeEach主要有3个参数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.dispath 来分发 action。

const store =newVuex.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 =newVuex.Store({

modules:{

a: moduleA,

b: moduleB

})

九、其它小知识点

1、css只在当前组件起作用

答：在style标签中写入scoped即可 例如： <stylescoped></style>

2、v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；

3、$route和$router的区别

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

作者：沉静地闪光

https://segmentfault.com/a/1190000016344599