智一面gtalent-vue面试真题真香系列

不花钱的面试面试模拟题：前端开发面试模拟题

v-model是vue.js的一条指令，实现数据的双向绑定


双向数据绑定的原理：


vue.js使用es5提供的属性特性功能，结合发布者-订阅者模式，通过Object.defineProperty()为各个属性定义get,set特性方法，在数据发送改变时给订阅者发布消息，触发相应的监听回调。


过程：a，对需要观察的数据对象进行递归遍历，包含子属性对象的属性，设置set和get特性方法；当给这个对象的某个值赋值时，会触发绑定的set特性方法，就能起到监听数据的变化。b，用compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，就会收到通知，并更新视图。c，Watcher订阅者是Observer和Compile之间通信的桥梁：在自身实例化时向属性订阅器dep里面添加自己；自身必须有一个update()方法；在dep.notice()发布通知时，能调用自身的update()方法，并触发Compile中绑定的回调函数。d，MVVM是数据绑定的入口，整合了Observer，Compile和Wathcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher来搭起Observer和Compile之间的通信桥梁，达到数据变化通知视图更新的效果，利用视图交互，变化更新数据model变更的双向绑定效果。

第一种方式，使用v-on；第二种方式，使用@语法糖

vuex是vue.js框架实现的状态管理系统。使用vuex，要引入store，并注入vue.js组件中，在组件内部可以通过$store访问store对象；使用场景，在单页应用中，用于组件之间的通信，如音乐播放，登录状态管理，加入购物车等


vuex可以说是一种开发模式或框架，它是对vue.js框架数据层面的扩展，通过状态集中管理驱动组件的变化，应用的状态集中放在store中，改变状态的方式是提交mutations，这是个同步的事务，异步的逻辑应该封装在action中。

自定义指令两种：一种全局自定义指令，vue.js对象提供了directive方法，可以用来自定义指令，directive方法接收两个参数，一个是指令名称，另一个是函数；第二种是局部自定义指令，通过组件的directives属性定义。

v-if判断对象是否隐藏；v-for循环渲染；v-bind绑定一个属性；v-model实现数据双向绑定

<div v-for="(item,index) in arrDa">

 <input type="text" v-model="arrData[index]">

 <h1>{{arrDa[index]}}</h1>

</div>

vue-router是vue.js的路由插件，（常用router-link和router-view）

beforeCreate

在实例初始化之后，数据观测者data observer和event/watcher事件配置之前调用


created

在实例创建完成后立即调用，此时，实例已完成：观测者，属性和方法的运算，watch/event事件回调，挂载阶段还没开始，$el属性目前不可见。


beforeMount

在挂载开始之前调用，相关的render函数首次调用。


mounted

el被新创建的vm.$el替换，并且在挂载到实例上之后再调用该钩。如果root实例挂载了一个文档内元素，当调用mounted时vm.$el也在文档内。


beforeUpdate

在数据更新时调用，发生在虚拟dom重新渲染和打补丁之前。


updated

由于数据更改导致的虚拟dom重新渲染和打补丁，在这之后会调用该钩子。


beforeDestroyed

在实例销毁之前调用，在这一步，实例仍然完全可用。


destroyed

在vue.js实例销毁后调用，vue.js实例指示的所有东西都会解除绑定，所有的事件监听会被移除，所有的子实例也会被销毁。


如果使用组件的keep-alive功能时，增加两个周期：


activated在keep-alive组件激活时调用；

deactivated在keep-alive组件停用时调用。

<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。<keep-alive>是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中。


当在<keep-alive>内切换组件时，它的activated和deactivated这两个生命周期钩子函数将会执行。


<keep-alive>

 <component :is="view"></component>

</keep-alive>

增加一个周期钩子：ErrorCaptured表示当捕获一个来自子孙组件的错误时调用。

组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，解决了传统项目开发中效率低，难维护，复用性等问题。


使用Vue.extend方法创建一个组件，使用Vue.component方法注册组件，子组件需要数据，可以在props中接收数据，而子组件修改好数据后，想要把数据传递给父组件，可以使用emit方法。


使用自定义组件：


在components目录中新建组件文件，脚本一定要导出暴露的接口；导入需要用到的页面；将导入的组件注入vue.js的子组件的components属性中；在template的视图中使用自定义组件。

<div id="app">

 <dada></dada>

</div>

<template id="demo">

 <div>

  <h1>{{msg}}</h1>

 </div>

</template>

<script type="text/javascript">

// 定义组件类

var dada = Vue.extend({

 template: '#demo',

 data:function() {

  return {

   msg: 'dadaqianduan.cn'

  }

 }

})

// 注册组件

Vue.component('dada',dada);

// 定义Vue实例化对象

var app = new Vue({

 el: '#app',

 data: {}

})

</script>

vue-loader它是解析.vue文件的一个加载器，将template/js/style转换成javascript模块；通过这个vue-loader，javascript可以写EMAScript6语法，style样式可以应用scss或less，template可以添加jade语法。。。

assets文件夹存放静态资源;

components存放组件;

router定义路由相关的配置;

view是视图;

app.vue是一个应用主组件;

main.js是入口文件。