vue不兼容 ie8 及以下。因为 vue 使用了 ES5 中 Object.defineProperty() 这个属性，该方法第一个被实现是在 ie8 中，但是存在诸多限制：只能在DOM对象上使用这个方法，而且只能创建访问器属性（数据属性无法访问）。因此在 ie8 以及以下的浏览器，vue程序无法运行。

vue官网上也说明了：



 

其他：

Object.defineProperty() 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

语法：

Object.defineProperty(obj, prop, desc)

obj 需要定义属性的当前对象
	
prop 当前需要定义的属性名
	
desc 属性描述符
 

1、对vue的理解，有什么特点，vue为什么不能兼容IE8及以下浏览器
vue是一套用于构建用户界面的渐进式框架，核心是一个响应的数据绑定系统
vue是一款MVVM框架，基于双向绑定数据，当数据发生变化时候，vue自身会进行一些运算
特点：简洁轻量、数据驱动、组件化、模块友好
vue.js使用了IE8无法模拟的 ECMAScript 5 特性，没有替代方案
2、简述Vue双向数据绑定的原理
主要是通过Object对象的defineProperty属性，重写data的set和get函数来实现的
vue是通过数据劫持的方式来做数据绑定，最核心的方法就是通过Object.defineProperty()来实现对属性的劫持
在设置或者获取的时候我们就可以在get或者set方法里加入其他的触发函数，达到监听数据变动的目的
3、什么是MVVM，和MVC的区别
MVVM是Model-View-ViewModel的缩写
Model层代表数据模型
View代表组件视图，负责将数据模型转化成UI展现出来
ViewModel是一个同步 View 和 Model 的对象(双向绑定)
在MVVM中，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，
Model和ViewModel之间的交互是双向的，因此 通过视图操作数据，也能通过数据操作视图
MVC是Model-View- Controller的简写。即模型-视图-控制器，使用MVC的目的是为了将M和V相分离
MVVM与MVC最大的区别就是实现了View和Model的自动同步，也就是当Model的属性改变时
我们不用再手动操作Dom来改变View，而是改变后该属性对应View层会自动改变
4、vue.js的两个核心是什么
数据驱动和组件化思想
5、vue与angular的区别
vue的双向邦定是基于ES5中getter/setter来实现的，而angular是由自己实现一套模版编译规则，需要进行所谓的“脏值”检查，vue则不需要
vue需要提供一个el对象进行实例化，后续的所有作用范围也是在el对象之下，而angular而是整个html页面
6、说下vue的底层原理
Vue的模式是m-v-vm模式，即(model-view-modelView)，通过modelView作为中间层，进行双向数据的绑定与变化
1)通过建立虚拟dom树document.createDocumentFragment(),方法创建虚拟dom树
2)一旦被监测的数据改变，会通过Object.defineProperty定义的数据拦截，截取到数据的变化
3)截取到的数据变化，从而通过订阅——发布者模式，触发Watcher(观察者),从而改变虚拟dom的中的具体数据
4)最后通过更新虚拟dom的元素值，从而改变最后渲染dom树的值，完成双向绑定
7、简述vue等单页面应用及优缺点
单页面应用，用户所有的操作都在一个页面完成
优点：无刷新，用户体验好，共享资源只需要请求一次即可，采用组件化的思想，代码结构更加规范化，便于修改和调整
缺点：对搜索引擎不友好、低版本不支持，第一次加载首页耗时相对较长，不能使用浏览器导航按钮，需要自行实现前进后退
8、React与Vue对比
相同点：
都支持服务器端渲染、数据驱动视图，状态管理
都有虚拟DOM、组件化开发、通过props参数进行父子组件数据的传递
不同点：
React严格上只针对MVC的C层,Vue则是MVVM模式
虚拟DOM方面
vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树，而React每当应用的状态被改变时,全部组件都会重新渲染
视图渲染方面
React采用JSX渲染到DOM，vue使用的是template模板
数据绑定方面
vue实现了数据的双向绑定，react数据流动是单向的
state对象方面
react应用中不可变的,需要使用setState方法更新状态
vue中,state对象不是必须的,数据由data属性在vue对象中管理
9、前端组件化有什么优势
1)提高开发效率
2)方便重复使用
3)便于协同开发
4)更容易管理维护
10、说一下vue的生命周期，当使用keep-alive属性时，会增加哪两个生命周期
创建前/后beforeCreate/created：
在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有
载入前/后beforeMount/mounted：
在beforeMount阶段，vue实例的el和data都初始化了，但还是挂载之前为虚拟的dom节点，data尚未替换。在mounted阶段，vue实例挂载完成，data成功渲染。
更新前/后beforeUpdate/updated：
当data变化时，会触发beforeUpdate和updated方法。不常用
销毁前/后beforeDestory/destoryed：
beforeDestory是在vue实例销毁前触发，一般在这里要通过removeEventListener解除手动绑定的事件
执行destroy方法后，vue实例已经解除了事件监听以及dom的绑定，但是dom结构依然存在
在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:
activated 与 deactivated
11、说说你对angular脏检查理解
angular中无法判断数据是否做了更改，所以设置了一些条件，当触发这些条件之后就会执行一个检测来遍历所有的数据，对比刚才更改的地方执行变化
这个检查很不科学而且效率不高，有很多多余的地方
12、如何使css只在当前组件起作用
如果想写的css只对当前组件起作用，则在style中写入scoped
13、vue中v-if和v-show的区别
v-if和v-show都是用来控制元素的渲染
v-if是根据后面数据的真假，来判断DOM的添加删除等操作
v-show只是在修改元素的css样式(display属性值)
v-if如果初始渲染条件为真，就渲染，反之就不渲染
v-show不管初始条件是否为真，都会被渲染
v-if有更高的切换消耗，不适合做频繁的切换
v-show有更高的初始渲染消耗，适合做频繁的切换
14、vue有哪些修饰符
事件修饰符：stop、prevent、self、once
键盘修饰符：enter、space、up、down
表单修饰符修饰符：number、trim、lazy
15、列举vue的几种常用指令
v-if、v-show、v-for、v-on、v-bind、v-model、v-once
16、v-on可以绑定多个方法吗？
可以
17、vue中$mount与el区别
$mount和el两者在使用中没有什么区别，都是将实例化后的vue挂载到指定的DOM元素中
如果在实例化vue时指定el，则该vue将会渲染在el对应的DOM中
没有指定el，则vue实例会处于一种“未挂载”的状态，此时通过$mount来手动执行挂载
18、vue事件修饰符怎么使用，举例说明
...

作为由华人程序员尤雨溪开发的前端构架，它的出身就给国人带来了巨大的荣耀。更为重要的是Vue相对于其他前端框架更加易于上手，而且还可以与第三方库或者既有项目整合，同时还可以为单页应用提供驱动。

目前行业的黑话：不会Vue的前端不是合格的前端工程师！

可能很多小伙伴之前都了解过 Vue.js 实现响应式的核心是利用了 ES5 的 Object.defineProperty，这也是为什么 Vue.js 不能兼容 IE8 及以下浏览器的原因，我们先来对它有个直观的认识。

Object.defineProperty

Object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象，先来看一下它的语法：



obj 是要在其上定义属性的对象；prop 是要定义或修改的属性的名称；descriptor 是将被定义或修改的属性描述符。

比较核心的是 descriptor，它有很多可选键值，具体的可以去参阅它的文档。这里我们最关心的是 get 和 set，get 是一个给属性提供的 getter 方法，当我们访问了该属性的时候会触发 getter 方法；set 是一个给属性提供的 setter 方法，当我们对该属性做修改的时候会触发 setter 方法。

一旦对象拥有了 getter 和 setter，我们可以简单地把这个对象称为响应式对象。那么 Vue.js 把哪些对象变成了响应式对象了呢，接下来我们从源码层面分析。

initState

在 Vue 的初始化阶段，_init 方法执行的时候，会执行 initState(vm) 方法，它的定义在 src/core/instance/state.js 中。



initState 方法主要是对 props、methods、data、computed 和 wathcer 等属性做了初始化操作。这里我们重点分析 props 和 data，对于其它属性的初始化我们之后再详细分析。

initProps



props 的初始化主要过程，就是遍历定义的 props 配置。遍历的过程主要做两件事情：一个是调用 defineReactive 方法把每个 prop 对应的值变成响应式，可以通过 vm._props.xxx 访问到定义 props 中对应的属性。对于 defineReactive 方法，我们稍后会介绍；另一个是通过 proxy 把 vm._props.xxx 的访问代理到 vm.xxx 上，我们稍后也会介绍。

initData



data 的初始化主要过程也是做两件事，一个是对定义 data 函数返回对象的遍历，通过 proxy 把每一个值 vm._data.xxx 都代理到 vm.xxx 上；另一个是调用 observe 方法观测整个 data 的变化，把 data 也变成响应式，可以通过 vm._data.xxx 访问到定义 data 返回函数中对应的属性，observe 我们稍后会介绍。

可以看到，无论是 props 或是 data 的初始化都是把它们变成响应式对象，这个过程我们接触到几个函数，接下来我们来详细分析它们。

proxy

首先介绍一下代理，代理的作用是把 props 和 data 上的属性代理到 vm 实例上，这也就是为什么比如我们定义了如下 props，却可以通过 vm 实例访问到它。



我们可以在 say 函数中通过 this.msg 访问到我们定义在 props 中的 msg，这个过程发生在 proxy 阶段：



proxy 方法的实现很简单，通过 Object.defineProperty 把 target[sourceKey][key] 的读写变成了对 target[key] 的读写。所以对于 props 而言，对 vm._props.xxx 的读写变成了 vm.xxx 的读写，而对于 vm._props.xxx 我们可以访问到定义在 props 中的属性，所以我们就可以通过 vm.xxx 访问到定义在 props中的 xxx 属性了。

同理，对于 data 而言，对 vm._data.xxxx 的读写变成了对 vm.xxxx 的读写，而对于 vm._data.xxxx 我们可以访问到定义在 data 函数返回对象中的属性，所以我们就可以通过 vm.xxxx 访问到定义在 data 函数返回对象中的 xxxx 属性了。

observe 的功能就是用来监测数据的变化，它的定义在 src/core/observer/index.js 中：



observe 方法的作用就是给非 VNode 的对象类型数据添加一个 Observer，如果已经添加过则直接返回，否则在满足一定条件下去实例化一个 Observer 对象实例。接下来我们来看一下 Observer 的作用。

Observer

Observer 是一个类，它的作用是给对象的属性添加 getter 和 setter，用于依赖收集和派发更新：



Observer 的构造函数逻辑很简单，首先实例化 Dep 对象，这块稍后会介绍，接着通过执行 def 函数把自身实例添加到数据对象 value 的 __ob__ 属性上，def 的定义在 src/core/util/lang.js 中：



def 函数是一个非常简单的Object.defineProperty 的封装，这就是为什么我在开发中输出 data 上对象类型的数据，会发现该对象多了一个 __ob__ 的属性。

回到 Observer 的构造函数，接下来会对 value 做判断，对于数组会调用 observeArray 方法，否则对纯对象调用 walk 方法。可以看到 observeArray 是遍历数组再次调用 observe 方法，而 walk 方法是遍历对象的 key 调用 defineReactive 方法，那么我们来看一下这个方法是做什么的。

defineReactive

defineReactive 的功能就是定义一个响应式对象，给对象动态添加 getter 和 setter，它的定义在 src/core/observer/index.js 中：



defineReactive 函数最开始初始化 Dep 对象的实例，接着拿到 obj 的属性描述符，然后对子对象递归调用 observe 方法，这样就保证了无论 obj 的结构多复杂，它的所有子属性也能变成响应式的对象，这样我们访问或修改 obj 中一个嵌套较深的属性，也能触发 getter 和 setter。最后利用 Object.defineProperty 去给 obj 的属性 key 添加 getter 和 setter。而关于 getter 和 setter 的具体实现，我们会在之后介绍。

总结

这一节我们介绍了响应式对象，核心就是利用 Object.defineProperty 给数据添加了 getter 和 setter，目的就是为了在我们访问数据以及写数据的时候能自动执行一些逻辑：getter 做的事情是依赖收集，setter 做的事情是派发更新。

 

 

初步认识vue
一、Vue特点，

Vue是不兼容ie8以及以下，因为Vue使用了不兼容ie8以及以下的es5的语法

易用，偏重于应用
灵活： 完整的生态系统

小米公司： 手机、电视、电脑、衣服、智能家居、。。。


高效

vue.js的原文件很小
性能高



二、 Vue为什么性能高？

应该Vue使用了  虚拟DOM  技术

三、 虚拟DOM是什么呢？

使用js对象模型来模拟真实DOM节点

四、Vue是一个MVVM类型框架，M  V  VM
五、什么是MVC

MVC其实一个架构思想，指的是讲一个软件【应用】分为三个部分

M  Model   模型  -->  data  数据
V  View    视图  -->  界面
C  Controller 控制器 --> 处理业务逻辑


MVC思想来源于后端

六、什么是jsx?（后面的{{}}里面可以写js语法就是这个的体现）

javascript + xml

xml就是标签化语法


在标签里面写js


基础指令


什么是指令

指令其实就是一个属性



指令是用来干什么的呢？

指令是使用操作DOM



Vue提供了14个内置指令，供我们使用



1、双大括号语法  {{}}  {{}}里面就可以写js语法了，这就是所谓的jsx
2、当我们引入vue.js之后，vue会注册一个Vue全局函数  window.Vue = functioin () {}
3、Vue是一个构造函数 =》 可以实例化
4、const vm = new Vue（） ，可以这样写，也可以直接写 new Vue()就行
5、new Vue() 要有el来挂载才行，一般这个el都是元素的id,不然没法触发执行

v-bind:指令： 单向数据绑定 ，将数据赋值给属性值
 <div id="app">
    <h2> 单向数据绑定  v-bind  将数据赋值给属性值 </h2>
      <img v-bind:src="pic" alt="">
      <!-- 简写 -->
      <img :src="pic" alt="">

 new Vue({
    el: '#app',
    data: {
      pic: 'url'


v-model: 双向数据绑定，类似两边写会相互影响,绑定的是== 数据 ==！！！！这个绑定的数据就是这个input框输入的东西

仅仅是应用于表单元素

v-model默认绑定了表单元素的value属性
含义

数据改变，视图也会随之改变
视图改变，数据也会随之改变





 <h2> 双向数据绑定  v-model </h2>
    <div>
      <label for=""> 用户名 </label>
      <input type="text" v-model = "username">
    </div>
    <div>
      <label for=""> 密 码 </label>
      <input type="text" v-model = "password">
    </div>

	new Vue({
	    el: '#app',
	    data: {
	      username: '',
	      password: '',

这种是指在vue控制台和视图之间的可以实现双向数据交换，v-model还有其他的用法，表单中的还有其他的v-model的用法

数据展示指令： v-text  v-html
	<h1> 数据展示 </h1>
	    <h3> {{}} </h3>
	    <p> {{ name }} </p>
	    <h3> v-text  </h3>
	    <p v-text = "name"></p>
	    <div v-text = "xml"></div>
	    <h3> v-html </h3>
	    <p v-html = "name"></p>
	    <div v-html = "xml"></div>

{{}}  vs  v-text  vs  v-html 区别

v-text 和 v-html 写法和结果是等价于  {{}}
{{}} 语法呢在刷新页面的时候，会出现闪现问题
v-text  和  v-html 是没有的
v-html会解析标签语法


条件渲染：v-show   v-if
条件渲染实现方式

条件展示

v-show

控制的是元素的  display 样式
如果初始条件为 false , 元素也会渲染，所以初始渲染开销较高，
v-show的切换开销较低




条件判断 == 适用于通过一个逻辑判断来决定点击出现酱紫的==

v-if       v-else   v-else-if
如果初始条件为 false , 元素不会渲染，渲染开销较低
条件判断的切换开销较高，因为它要不断的生成和销毁元素



	<div id="app">
	    <h2> 条件展示 v-show </h2>
	    <div class="mask" v-show = "flag"> 模态框 </div>
	    //这里的模拟块渲染了 但是没有展示的意思，所以上面说的初始条件为false元素也会渲染的意思

 new Vue({
    el: '#app',
    data: {
      flag: false

条件判断
 <h2> 条件判断 </h2>
      <h3> 单路判断 </h3>
        <p v-if = "f"> NBA - 詹姆斯 </p>
        //这时f为false时不能显示詹姆斯
        
      <h3> 双路判断 </h3>
        <h4> 女孩 选择  两个男孩中的一个 </h4>
        <p v-if = "choose"> AA </p>
        <p v-else> BB </p>
		//这时choose为true就显示AA，false就显示BB

      <h3> 多路判断 </h3>
        <input type="text" v-model = "grade">
        <p v-if = "grade >= 80"> 优秀 </p>
        <p v-else-if = "grade >= 60"> 良好 </p>
        <p v-else = "grade < 60"> 不及格 </p>
		//这里是双向数据绑定的，修改了input框里面的数值就相当于修改了data中的数值，从而达到更改判断条件的操作

	 new Vue({
	    el: '#app',
	    data: { 
	      grade: 60
	    }
	  })