vue对于浏览器版本的支持

Vue不支持IE8及以下，部分兼容IE9，完全兼容IE10以上。因为Vue的响应式原理是基于ES5的Object.defineProperty()，这个方法不支持IE8及以下。

Vue.js 渐进式框架是什么意思？

Vue 采用自底向上增量开发的设计，采用分层的设计模式有5层设计：首先声明式渲染就是JSX语言，变量可以放在模板标签中，是Vue.js的核心库。然后是组件系统也就是组件化开发，还有大规模状态管理就是数据仓库所有组件共用了存储数据的地方就是Vuex插件。再是构建工具即开发环境cli脚手架的集成，最后是客户端路由。渐进式是在开发过程中按需引入功能，不是一次性都引入，有点类似于迭代开发。

Vue全家桶（Vue的生态系统）

Vue.js核心库，网络技术：vue-axios以及Axios/featch，路由vue-router，数据仓库vuex还有UI库element-ui

MVC和MVVM的理解和区别

理解：1.MVC是Model-View-Controller的简写，即数据模型-视图-控制器。数据模型是定义数据修改和操作的业务逻辑即后端传递的数据，视图是负责将数据模型转化成UI展现出来即UI组件，控制器是页面业务逻辑。使用MVC目的是将数据模型与视图的代码分离，MVC是单向通信，视图和数据模型需要控制器来承上启下。

2.MVVM是Model-View-ViewModel的简写，即数据模型-视图-视图模型。数据模型是定义数据修改和操作的业务逻辑即后端传递的数据，视图是负责将数据模型转化成UI展现出来即UI组件，视图模型是监听模型数据的改变和控制视图行为、处理用户交互，即数据模型和视图的桥梁。视图模型通过双向数据绑定把视图层和数据模型层连接起来，而视图和 数据模型之间的同步工作完全是自动的，不需要手动操作DOM，因此开发者只需关注业务逻辑，不需要关注数据状态的同步问题，复杂的数据状态维护完全由视图模型VM对象来统一管理。

区别：两者区别不是特别大，都是一种设计思想。视图模型并没有完全取代了控制器，MVVM只是在MVC的基础上增加了一层VM视图模型只不过弱化了控制器的概念，VM存在目的在于抽离控制器中展示的业务逻辑，而不是替代控制器做业务逻辑，其它视图操作业务等还是应该放在控制器中实现，也就是MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用。

MVVM使用场景：MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验。数据操作比较多的场景，需要大量操作DOM元素时，采用MVVM的开发方式，会更加便捷，通过数据来显示视图层而不是节点操作。

Vue.js的两个核心是什么？

数据驱动、组件系统

什么是响应式数据（响应式数据的原理）

响应式数据的原理是采用数据劫持方式，即Object.defineProperty() 劫持 data 中各属性，实现响应式数据，若 data中某属性多次发生变化，watcher仅会进入更新队列一次。即如果内存中的数据变化了页面UI也会动态跟着刷新这种数据就是响应式数据。

响应式数据设计原理

vue2.0 采用数据劫持结合发布者-订阅者设计模式（就是watcher函数观察数据源是否发生改变）的方式，通过ES5的Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue3.0使用ES6的proxy代理了整个data对象

vue3.0使用ES6的proxy代理了整个data对象的原因是，在Vue2.0通过ES5的Object.defineProperty（）来劫持数据时当数据源data对象中引用了数组时不会劫持数组的下标，因为数组的下标可能是无限个，所以底层劫持的是数组的所有方法，通过数组的方法来操作数组中的数据才会刷新页面显示修改后的内容而直接通过数组的下标来操作数据时因为创建的Vue实例并没有劫持所以修改后不会自动刷新页面，除了使用数组的方法官方也提供了创建的Vue实例的静态方法实现。

<p>{{arr[2]}}</p>
this.arr[2]="hello"//没有劫持数组的下标(不能刷新页面)
解决方法：
1.使用数组的方法this.arr.splice(2,1,"hello")//劫持了数组的方法(可以刷新页面)
2.官方提供的静态函数，第1个参数是要操作的数组对象，第2个参数就是要改变的下标，第3个参数是改变的值
Vue.set(this.arr,2,"hello")//vue帮我们刷新页面					this.$set(this.arr,2,"hello")//vue帮我们刷新页面

什么是双向数据绑定

双向数据绑定首先是如果数据容器中的数据改变了会让页面刷新就是DOM操作让页面改变，然后是如果用户操作了页面从而改变了页面反之也会让数据容器中的数据发生改变。

计算属性，属性侦听器，方法，过滤器的区别？哪些被this对象劫持过？

计算属性会把计算结果缓存，并监听计算过的数据源，如果监听的数据源发生变化才会重新计算调用函数，没有监听的数据源发生变化模板也会重新渲染。它会被this对象劫持

方法一般是提供给模板事件和其他方法(比如钩子函数)使用，如果在模板中使用了方法，但不是作为事件绑定，如果模板中渲染的任意数据源改变了，它都会重新调用。它会被this对象劫持

过滤器往往用于数据渲染前的数据处理，除了用法跟方法不一样其他都一样，它可以实现连调，它不会被this对象劫持

属性侦听器:只有侦听的属性发生变化才会触发，可以深度侦听多级结构中的所有数据，但是更消耗内存。它会被this对象劫持

把这些函数计算属性，属性侦听器，方法，过滤器分开设计是为了业务更明显，功能更好调试

什么是生命周期函数

Vue组件对象在创建到销毁的过程中，在某一种条件成立的时刻，系统会调用的Vue中设定的函数

Vue的生命周期函数有哪些

组件生命周期函数有8个表示创建前后，挂载前后，销毁前后；路由（组件有3个生命周期函数；全局有2个生命周期函数；独享有1个生命周期函数）；动态组件有2个生命周期函数；自定义指令有5个

为什么要设计生命周期函数

为了更好的设计程序，让代码更有逻辑性和可维护性

页面首次加载过程中，会依次触发哪些钩子函数

beforeCreate，created，beforeMount，mounted

this.$el 是什么?它在哪些钩子中才能访问?

this.$el代表了当前组件的真实DOM，要在mounted之后才有。

Vue 实例的 data 属性，在哪些钩子中能访问

created，beforeMount，mounted ，beforeUpdate updated，beforeDestroy

为什么不要在更新钩子中做页面的数据请求?

因为这样会导致死循环，当数据源发生改变就会刷新页面就会一直重复调用更新页面的钩子函数，react有一个shoudComponentUpdate可以自己控制但是Vue没有

用beforeCreate做过什么业务?

这个函数中可以做网络请求，但是VM对象没有构建完毕，此时数据方法等的劫持还没有完成，不能操作this，因此只要不是运用到网页页面渲染的网络请求就可以进行预加载比如预加载工具，预加载图片，第三方工具的预加载

VM和DOM之间的关系?

1.VM对象是JS模拟出来的跟DOM结构很像的一种对象结构VNode。它通过底层的render函数渲染到页面上，让页面DOM跟虚拟VNode关联映射。

2.如果VM的数据源发生变化，会让内存中生成新的VNode，新的VNode会和旧的VNode作比较然后更新，这个过程就是DIFF算法

组件中data为什么是函数返回对象

1.组件中的data是函数的设计是因为组件被复用时，data数据源才不会共用，因为data函数每运行一次就会返回一个独立的可维护的对象。

2.函数的设计就像懒加载一样，当使用组件时，数据源的对象才会创建，这样设计性能更好。

数据劫持的顺序

讲一讲DIFF算法?

DIFF算法是一种对比算法，对比两者是旧虚拟DOM和新虚拟DOM，对比出是哪个虚拟节点更改了，找出这个虚拟节点，并只更新这个虚拟节点所对应的真实节点，而不用更新其他数据没发生改变的节点，实现精准地更新真实DOM，进而提高效率。比较只会在同层级进行, 不会跨层级比较。在diff比较的过程中，循环从两边向中间比较。

什么是单向数据流

单向数据流是数据一般从父组件传到子组件，子组件没有权利直接修改父组件传来的数据，子组件修改了父组件传来的数据，数据也不会在父组件中改变，只改变了子组件中的数据。即子组件从组件属性 props 中直接获取的数据，只能请求父组件修改数据再传给子组件。这样就防止从子组件意外改变父级组件的状态，从而导致应用的数据流向难以理解。

Vue框架的理解

1.Vue.js是一套构建用户界面的，分层渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

2.详细描述每一个知识点

3.自己的见解

10道Vue的选择题

1. Vue 中响应式数据原理的说法

1.对于 Vue 中响应式数据原理的说法，下列哪项是不正确的？（BD）
A. 采用数据劫持方式，即 Object.defineProperty() 劫持 data 中各属性，实现响应式数据
B. 视图中的变化会通过 watcher 更新 data 中的数据（错误答案）
C. 若 data 中某属性多次发生变化，watcher 仅会进入更新队列一次
D. 通过编译过程进行依赖收集

1.watcher更新UI界面，不是更新数据 2.编译唯一目的是生成render函数，依赖收集只在各个组件初始化中过程收集依赖

2.下列关于 v-model 的说法，哪项是不正确的？

下列关于 v-model 的说法，哪项是不正确的？（C）
A. v-model 能实现双向绑定
B. v-model 本质上是语法糖，它负责监听用户的输入事件以更新数据
C. v-model 是内置指令，不能用在自定义组件上
D. 对 input 使用 v-model，实际上是指定其 :value 和 @input或者:oninput

v-model 是内置指令，可以用在自定义组件上，子组件在props中通过value接收数据，通过$emit('input')去派发事件

3.Vue 实例的 data 属性，可以在哪些生命周期中获取到

 Vue 实例的 data 属性，可以在哪些生命周期中获取到？（BCD）
A. beforeCreate
B. created
C. beforeMount
D. mounted

Vue 实例的 data 属性在除了创建完成前beforeCreate和destroyed销毁之后其他生命周期函数都可以获取和操作

4.关于 Vue 的生命周期，下列哪项是不正确的？

关于 Vue 的生命周期，下列哪项是不正确的？（D）
A. DOM 渲染在 mounted 中就已经完成了
B. Vue 实例从创建到销毁的过程，就是生命周期
C. created 表示完成数据观测、属性和方法的运算和初始化事件，此时 $el 属性还未显示出来
D. 页面首次加载过程中，会依次触发 beforeCreate，created，beforeMount，mounted，beforeUpdate，updated

页面首次加载不会触发beforeUpdate，updated

5.下列对 Vue 原理的叙述，哪些是正确的？

下列对 Vue 原理的叙述，哪些是正确的？（ABCD）
A. Vue 中的数组变更通知，通过拦截数组操作方法而实现
B. 编译器目标是创建渲染函数，渲染函数执行后将得到 VNode 树
C. 组件内 data 发生变化时会通知其对应 watcher，执行异步更新
D. patching 算法首先进行同层级比较，可能执行的操作是节点的增加、删除和更新

6.下列说法不正确的是哪项？

下列说法不正确的是哪项？（B）
A. key 的作用主要是为了高效地更新虚拟 DOM
B. 若指定了组件的 template 选项，render 函数不会执行
C. 使用 vm.$nextTick 可以确保获得 DOM 异步更新的结果
D. 若没有 el 选项，vm.$mount(dom) 可将 Vue 实例挂载于指定元素上

每一个组件在加载时都会调用Vue内部的render函数把该组件的tamplate选项的模板解析为一个JS对象然后使用render函数渲染

7.关于 Vue 组件间的参数传递，下列哪项是不正确的？

关于 Vue 组件间的参数传递，下列哪项是不正确的？（B）
A. 若子组件给父组件传值，可使用 $emit 方法
B. 祖孙组件之间可以使用 provide 和 inject 方式跨层级相互传值
C. 若子组件使用 $emit('say') 派发事件，父组件可使用 @say 监听
D. 若父组件给子组件传值，子组件可通过 props 接受数据

祖孙组件之间可以使用 provide 和 inject 方式跨层级传值，但是这种方法都是单向的，无法互相传值

8.下列说法不正确的是哪项？

下列说法不正确的是哪项？（B）
A. 可通过 this.$parent 查找当前组件的父组件
B. 可使用 this.$refs 查找命名子组件
C. 可使用 this.$children 按顺序查找当前组件的直接子组件
D. 可使用 $root 查找根组件，并可配合 children 遍历全部组件

this.$children不能按顺序查找的子组件因为不知道具体顺序

9.下列关于 Vuex 的描述，不正确的是哪项？

下列关于 Vuex 的描述，不正确的是哪项？（CD）
A. Vuex 通过 Vue 实现响应式状态，因此只能用于 Vue
B. Vuex 是一个状态管理模式
C. Vuex 主要用于多视图间状态全局共享与管理
D. 在 Vuex 中改变状态，可以通过 mutations 和 actions

Vuex 不是用于多视图间状态全局共享与管理，多视图是指多个Vue实例之间

改变状态的是mutations，actions内部也是通过context.commit的mutations的方法

10.下列关于 vue-router 的描述，不正确的是哪项？

下列关于 vue-router 的描述，不正确的是哪项？（C）
A. vue-router 的常用模式有 hash 和 history 两种
B. 可通过 addRoutes 方法动态添加路由
C. 可通过 beforeEnter 对单个组件进行路由守卫
D. vue-router 借助 Vue 实现响应式的路由，因此只能用于 Vue

addRoutes 方法动态添加路由已经被弃用，改为了addRoute

beforeEnter是对单个路由的守卫，不是单个组件