2018面试题小结

时间 2019-11-10

原文原文链接

一、MVVM和MVC的区别？

（1）MVC中M表示Model模型，V表示view视图， C表示controller控制器；MVVM中M表示model模型，V表示view视图，VM表示viewmodel；

（2）MVC的见解是界面上的每一个变化都是一个事件，咱们只须要针对每一个事件来写一堆代码，来把用户的输入转换成model里的对象，而这段转换的代码就是controller。简言之，MVC是单向通讯，view和model必须经过controller来承上启下。

MVVM的见解是我给view里面的各类控件也定义一个对应的数据对象，只须要修改这个数据对象，view里面显示的内容就会自动更新，而view里作了任何操做，这个数据对象也会跟着更新。这就是所谓的双向数据绑定。viewmodel就是与界面view对应的model，由于数据库结构每每是不能直接和界面控件一一对应，因此咱们须要再定义一个数据对象专门对应view上的控件，而viewmodel的职责就是把model对象封装成能够显示和接受输入的界面数据对象。简单来讲，viewmodel就是view和model的链接器，view和model经过viewmodel实现双向绑定。

（3）MVC各部分通讯以下：

view传送指令到controller，controller完成业务逻辑后，要求model改变状态，model将新的数据发送到view，用户获得反馈。

MVVM各部分通讯以下：

各部分之间的通讯都是双向的，view与model不发生联系，而经过viewmodel传递，view很是薄，不部署任何业务逻辑，称为‘被动视图’，即没有任何主动性，而viewmodel很是厚，全部的逻辑都部署在那里。

MVVM和MVP的主要区别在于，MVVM采用的是双向绑定，view的变更自动反映在viewmodel上，反之亦然。angular、ember、vue都采用这种模式。

二、Mobx和Redux的区别？

（1）Mobx的优点来源于可变数据和可观察数据；Redux的优点来源于不可变数据。

（2）redux和mobx都没有使用传统的mvc/mvvm形式，而是采用flux的结构，action处理请求，而后将请求dispatch到store中，这样设计也十分契合react单向数据流的概念。二者使用flux结构也略有不一样，mobx在store和view中处理数据是使用双向绑定。双向绑定无疑会增长性能消耗，可是mobx在双向绑定的同时禁掉了react自身的刷新。

（3）框架体验，开发效率，学习成本方面mobx更好

三、angular和vue的区别？

（1）数据绑定

angular和vue都是双向绑定，可是vue在不一样组件之间强制使用单项数据流，这样使应用中的数据流更加清晰易懂。

（2）指令和组件

在vue中指令和组件分得很清晰。指令只封装dom操做，而组件表明自给自足独立的单元，就是有本身的视图和数据逻辑。

在angular中，每件事都由指令来作，而组件只是一种特殊的指令。

四、axios

（1）处理并发请求助手函数（两个请求都完成才执行操做）

axios.all(iterable)，axios.spread(callback)

 
            function  
            getUserAccount() { 
           
            return  
            axios.get( 
            '/user/123456' 
            ) 
           
            } 
           
            function  
            getUserPermissions() { 
           
            return  
            axios.get( 
            '/user/123456/permissions' 
            ) 
           
            } 
           
            axios.all([getUserAccount(), getUserPermissions()]) 
           
            .then(axios.spread( 
            function 
            (acct, perms) { 
           
            // 两个请求如今都执行完成 
           
            }))

（2）拦截器：在请求或响应被then或者catch处理以前拦截他们

// 添加请求拦截器
axios.interceptors.request.use(function(config) {
    // 在发送请求前作些什么
    return config
}, function(error) {
    // 对请求错误作些什么
    return Promise.reject(error)
});
 
// 添加响应拦截器
axios.interceptors.response.use(function(response){
    // 对响应数据作些什么
    return response
}, function(error) {
    // 对响应错误作些什么
    return Promise.reject(error)
})

若是想在稍后移除拦截器：

var myInterceptor = axios.interceptors.request.use(function(){});
axios.interceptors.request.eject(myInterceptor);

（3）、使用cancel token取消请求

可使用CancelToken.source工厂方法建立cancel token：

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
 
axios.get('/user/123456', {
    cancelToken: source.token
}).catch(function(throw) {
    if (axios.isCancel(throw)) {
        console.log('request cancel', throw.message)
    } else {
        // 处理错误
    }
})
 
// 取消请求，message参数是可选的
source.cancel('Operation canceled by the user');

还能够经过传递一个executor函数到CancelToken的构造函数来建立cancelToken：

var CancelToken = axiox.CancelToken;
var cancel;
 
axios.get('/user/123', {
    cancelToken: new CancelToken(function executor(c) {
        // executor函数接收一个cancel做为参数
        cancel = c
    })
})
 
// 取消请求
cancel();

可使用同一个cancel token取消多个请求。

五、promise

promise是为了解决回调地狱的问题，是异步编程的一种解决方案。简单来讲，它就是一个容器，里面存放着某个将来才会结束的事件（一般是一个异步操做的结果）。从语法上说，他就是一个对象（构造函数），从它能够获取异步操做的消息。它提供统一的API，各类异步操做均可以用一样的方法进行处理。

promise的原理并不难，它有三个状态，分别是pending、fulfilled、rejected。pending是对象建立后的初始状态，当对象fulfill（成功）时变为fulfilled，当对象reject（失败）时变为rejected。且只能从pending变为fulfilled或rejected，而不能逆向或者从fulfilled变为rejected或者从rejected变为fulfilled。

(1)promise.all()方法是等全部异步操做都执行完毕后才执行then回调

(2)promise.race()

race就是赛跑的意思，因此它是指只要有一个异步操做执行完成就会马上执行then回调，其余没有执行完成的异步操做仍然在继续执行，而不是中止。

六、less、sass（参考地址： https://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html）

（1）less和sass在语法上有些共性：（8个）

混合：class中的class（将一个定义好的class A引入到另外一个class B中，从而简单实现class B继承了class A的全部属性）
参数混合：能够将class像函数的参数同样进行传递
嵌套规则：class中嵌套class，从而减小重复的代码（在一个选择器中嵌套另外一个选择器来实现继承）
运算： css中的数学计算（在css中使用加减乘除进行数学计算，主要运用于属性值和颜色的运算）
颜色功能：能够编辑你的颜色（颜色的函数运算，颜色会被先转化成HSL色彩空间，而后在通道级别操做）
命名空间：样式分组，从而方便被调用（将一些变量或者混合模块打包封装，更好的组织css和属性集的重复使用）
做用域：局部修改样式（先从本地查找变量或者混合模块，若是没有找到的话就会去父级做用域中查找，直到找到为止，这一点和其余程序语言的做用域很是的类似）
js表达式：在css样式中使用js表达式赋值（在less或者sass文件中可使用js的表达式，用来赋值）

（2）less和sass之间的区别：

他们之间的主要区别在于实现方式不一样，less是基于js运行，因此less是在客户端处理；sass是基于ruby的，是在服务器端处理的。

不少开发者不选择less是由于less输出修改过的css到浏览器须要依赖于js引擎，而js引擎须要额外的时间来处理代码。关于这个有不少种方式，我选择的是只在开发环节使用less。一旦开发完成，我就复制粘贴less输出到一个压缩器，而后到一个单独的css文件来替代less文件。另外一种方式是使用less app来编译和压缩你的less文件。两种方式都将是最小化你的样式输出，从而避免因为用户的浏览器不支持js而可能引发的任何问题。

七、es6

（1）、新增了let和const命令

let用来声明变量，用法相似var，可是所声明的变量只在let命令所在的代码块内有效，const通常用做声明常量，只声明不赋值就会报错；

let和const都不存在变量提高，也就是说只能在声明后使用，不然报错；

let和const都存在‘暂时性死区’，就是说只要在块级做用域内存在const或者let命令声明的变量，那么它声明的变量就绑定这个区域，再也不受到外部的影响，这就叫‘暂时性死区’；

let和const不容许在相同做用域内重复声明同一个变量；

let和const其实是为js新增了块级做用域。

（2）、对字符串进行了扩展

好比模板字符串：

模板字符串是加强版的字符串，用反引号（`）标识，它能够看成普通字符串使用，也能够用来定义多行字符串，或者在字符串中嵌入变量。模板字符串中嵌入变量，须要将变量名写在${}中。

（3）、箭头函数

箭头函数在定义以后，this的指向就不会发生改变了，不管用什么方式调用它，this的指向都不会改变。由于：

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象；

不能够看成构造函数，也就是说不可使用new命令，不然报错；

不可使用arguments对象，该对象在函数体内不存在，若是要用，能够用rest参数代替；

不可使用yield命令，所以箭头函数不能用做Generator函数。

eg：

（4）promise

（5）变量的解构赋值

ES6容许按照必定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。本质上，这种写法属于‘模式匹配’，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

对象的解构与数组有一个重要的不一样，数组元素是按照次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

解构赋值容许指定默认值：

还有不少。。。。。

八、cookie、sessionStorage、localStorage异同点

（1）数据生命周期

cookie生成时就会被指定一个maxAge值，这就是cookie的生存周期，在这个期间内cookie都有效，默认是浏览器关闭失效；

sessionStorage页面会话期间可用；

localStorage除非数据被清除，不然一直存在。

（2）存放数据大小

cookie4k左右，由于每次http请求，都会携带cookie；

sessionStorage和localStorage通常5M或者更大；

（3）与服务器通讯

cookie由对服务器的请求来传递，每次都会携带在http头中，若是使用cookie保存过多的数据会带来性能问题；

sessionStorage和localStorage数据不是由每一个服务器请求传递的，而是只有在请求时使用数据，不参与与服务器的通讯

（4）易用性

cookie须要本身封装setCookie和getCookie；

sessionStorage和localStorage能够用源生接口，也能够再次封装来对object和array有更好的支持

（5）共同点

都是保存在浏览器端，和服务器端的session机制不一样

九、JSONP的原理

ajax请求受到同源策略的影响，不容许进行跨域请求，而script标签的src属性中的连接却能够访问跨域的js脚本，利用这个特性，服务端再也不返回json格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样就实现了跨域。

十、vue的生命周期（参考： http://www.javashuo.com/article/p-waxdskaz-cs.html）

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

（1）beforeCreate：el和data未初始化

（2）created：完成了data数据的初始化，el未初始化

（3）beforeMount：el和data已经初始化，还未渲染好，只是使用虚拟DOM把坑先占住。

（4）mounted：完成挂载，已经渲染完成。

十一、谈一谈闭包（参考： http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html）

闭包的概念：

闭包就是可以读取其余函数内部变量的函数。在js中，只有函数内部的子函数才能读取局部变量，因此闭包能够理解为‘定义在一个函数内部的函数’。在本质上，闭包是将函数内部和函数外部链接起来的桥梁。

闭包的用途：

（1）能够读取函数内部的变量

（2）让这些变量的值始终保持在内存中，由于这些变量始终被引用着，因此不会被垃圾回收机制回收

闭包的注意点：

（1）因为闭包使得函数中的变量都被保存在内存中，内存消耗很大，因此不能滥用闭包，不然会形成网页性能问题，在IE中可能致使内存泄漏。解决办法：在退出函数以前，将不使用的局部变量所有删除。

（2）闭包会在父函数外部改变父函数内部变量的值。因此，若是你把父函数看成对象使用，把闭包看成它的公用方法，把内部变量看成它的私有属性，这时候要当心，不能随便改变父函数内部变量的值。

十二、原型链

（1）、构造函数、原型、实例的关系

构造函数都有一个proptotype属性；

原型对象prototype里面有一个constructor属性，该属性指向原型对象所属的构造函数；

实例对象都有一个__proto__属性，该属性也指向构造函数的原型对象，他是一个非标准属性，不能够用于编程，是浏览器本身使用的。

（2）prototype和__proto__关系

prototype是构造函数的属性，__proto__是实例对象的属性。这二者都指向同一个对象。

（3）原型链属性搜索（什么是原型链）？

在访问对象的某个成员的时候，会先从对象自己进行查找，若是对象中查找不到，那么就会去它的构造函数的原型对象中进行查找，若是没有找到，那么就会去它的原型对象的原型对象中查找，这样一层一层往上查找，直到object的原型对象的原型是null为止。

1三、如何理解同步和异步？

全部任务均可以分红两种，一种是同步任务（syn），另外一种是异步任务（asyn）。同步任务指的是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程，而进入‘任务队列’的任务，只有‘任务对列’通知主线程，某个异步任务能够执行了，该任务才会进入主线程执行。

运行机制以下：

（1）全部同步任务都在主线程上执行，造成一个执行栈

（2）主线程外，还存在一个任务队列，只要异步任务有了运行结果，就在任务队列中放置一个事件

（3）一旦执行栈中的全部同步任务执行完毕，系统就会读取任务队列，看看里面有哪些事件。那些对应的异步任务就会结束等待状态，而进入执行栈，开始执行

（4）主线程上不断重复上面三步。

1四、webpack

（1）什么是webpack？

webpack能够看做是模块打包机，她作的事情是分析你的项目结构，找到js模块以及其余的一些浏览器不能直接运行的拓展语言（sass、typescript等），并将其转换和打包为合适的格式供浏览器使用。

（2）webpack的工做方式

wenpack的工做方式是把你的项目看成一个总体，经过一个给定的主文件（如index.js），webpack将从这个文件开始找到你项目的全部依赖文件，使用loaders处理他们，最后打包为一个或者多个浏览器可识别的js文件

（3）打包原理

把全部依赖打包成一个bundle.js文件，经过代码分割成单元片断并按需加载。

（4）webpack的核心思想

一切皆模块：正如js文件能够是一个模块，其余文件css、image或者html也能够视做模块，所以，能够require('xxx.css')，这意味着咱们将事物分割成更小的易于管理的片断，从而达到重复利用的目的。

按需加载：传统的模块打包工具最终将全部的模块编译生成一个庞大的bundle.js文件，可是在真实的app里面，bundle.js文件可能有10M或者15M之大，可能会致使应用一直处于加载中状态。所以webpack使用不少特性来分割代码而后生成多个bundle.js文件，并且异步加载部分代码以实现按需加载。

1五、vue双向数据绑定的原理

主要是经过object对象的defineProperty属性，重写data的set和get函数来实现的。

1六、React组件生命周期过程说明

（1）实例化

首次实例化：

getDefaultProps
getInitialState
componentWillMount
render
componentDidMount

实例化完成后的更新：

getInitialState
componentWillMount
render
componentDidMount

（2）存在期

组件已存在时的状态改变：

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

（3）销毁&清理期

componentWillUnmount

(4)说明

生命周期共提供了10个不一样的API

getDefaultProps：做用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。

getInitialState：做用于组件的实例，在实例建立时调用一次，用于初始化每一个实例的state，此时能够访问this.props。

componentWillMount：在完成首次渲染以前调用，此时仍能够修改组件的state。

render：必选的方法，建立虚拟DOM，该方法具备特殊的规则：

只能经过this.props和this.state访问数据
能够返回null、false或者任何React组件
只能出现一个顶级组件（不能返回数组）
不能改变组件的状态
不能修改DOM的输出

componentDidMount：真实的DOM被渲染出来后调用，在该方法中能够经过this.getDOMNode()访问到真实的DOM元素，此时已经可使用其余类库来操做这个DOM。

在服务器端，该方法不会被调用。

componentWillReceiveProps：组件接收到新的props时调用，并将其做为参数nextProps使用，此时能够更改组件props以及state。

componentWillReceiveProps: function(nextProps) { if (nextProps.bool) { this.setState({ bool: true }); } }

shouldComponentUpdate：组件是否应当渲染新的props或state，返回false表示跳事后续的生命周期方法，一般不须要使用以免出现bug。在出现应用的瓶颈时，能够经过该方法进行适当的优化。

在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用。

componentWillUpdate：接收到新的props或者state后，进行渲染前调用，此时不容许更改props或者state。

componentDidUpdate：完成渲染新的props或者state后调用，此时能够访问到新的DOM元素。

componentWillUnmount：组件被移除以前调用，能够用于作一些清理工做，在componentDidMount方法中添加的全部任务都须要在该方法中撤销，好比建立的定时器或者添加的事件监听器。

1七、React+Mobx核心概念

（1）state----状态

状态是驱动应用的数据

（2）observable（value）&&@observable

observable值能够是JS基本数据类型、引用类型、普通对象、类实例、数组和映射。其修饰的state会暴露出来供观察者使用。

（3）observer（观察者）

被observer修饰的组件，将会根据组件内使用到的被observable修饰的state的变化而自动从新渲染

（4）action（动做）

只有在actions中，才能够修改Mobx中的state的值。

注意：当你使用装饰器模式时，@action中的this没有绑定在当前这个实例上，要用@action.bound来绑定使得this绑定在实例对象上

（5）computed

计算值（computed values）是能够根据现有的状态或者其余计算值衍生出的值

getter：获取计算获得的新的state并返回

setter：不能用来直接改变计算属性的值，可是他们能够用来做‘逆向’衍生。

1八、Vue和React的异同点？

Vue的优点：

（1）模板或渲染的灵活选项

（2）语法以及项目设置的简单

（3）渲染速度更快，体积更小

React的优点：

（1）更大的规模、更多的使用者、更好的可测试性

（2）同时适用Web和原生App

（3）能提供更多支持和工具的更大的生态系统

二者共同的优点：

（1）都是优秀的UI库

（2）使用虚拟DOM快速渲染

（3）轻量级

（4）响应式组件

（5）服务端渲染

（6）轻松集成的路由、捆绑和状态管理

（7）强大的支持和社区

1九、web前端性能优化常见方法（参考地址： http://www.javashuo.com/article/p-fuiyxcgo-kc.html）

（1）内容优化

减小HTTP请求数：常见方法有合并多个css和js文件，利用css sprites整合图像，Inline Images（使用data：URL scheme在实际页面嵌入图像数据），合理设置http缓存等。
减小DNS查找
避免重定向
使用Ajax缓存
延迟加载组件、预加载组件
减小DOM元素数量
最小化iframe数量
避免404

（2）服务器优化

使用内容分发网络（CDN）：把网站内容分散到多个、处于不一样地域位置的服务器上能够加快下载速度
GZIP压缩
设置ETag
提早刷新缓存区
对ajax请求使用GET方法
避免空的图像src

（3）cookie优化

减少cookie大小
针对web组件使用域名无关的cookie

（4）css优化

将css代码放在HTML页面顶部
避免使用css表达式
使用link代替@import
避免使用filters

（5）js优化

将js脚本放在页面底部
将js和css做为外部文件来引用，在实际应用中使用外部文件能够提升页面速度，由于js和css文件都能在浏览器中产生缓存
缩小js和css
删除重复的脚本
最小化DOM的访问：使用js访问DOM元素比较慢
开发智能的事件处理程序
js代码注意：谨慎使用with，避免使用eval Function函数，减小做用域链的查找

（6）图像优化

优化图片大小
经过css Sprites优化图片
不要在HTML中使用缩放图片
favicon.ico要小并且可缓存

20、call()、apply()、bind()区别

概念：

（1）call()、apply()能够看做是某个对象的方法，经过调用方法的形式来间接调用函数，简单来讲就是让函数在某个指定的对象下执行。

（2）bind()就是将某个函数绑定到某个对象上。

（3）三个方法的做用都是改变函数的执行上下文。

区别：

（1）call和apply的第一个参数相同，就是指定的对象。这个对象就是该函数的执行上下文。他们的区别在于参数不一样，call第一个参数以后的其余全部参数就是传入该函数的值，以逗号分隔；apply只有两个参数，第二个是数组，这个数组就是该函数的参数。

（2）bind和二者的区别在于bind方法会返回执行上下文被改变的函数而不会当即执行，前二者是直接执行该函数。bind的参数和call相同。

2一、flex布局（弹性布局）（参考： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$）

常问的几个属性：

（1）flex-direction项目排列的方向，column垂直排列。

（2）flex-wrap若是一条轴线排不下，如何换行。wrap换行。

（3）justify-content项目在主轴上的对齐方式。canter居中；space-between两端对齐且项目之间间隔相等；space-around每一个项目两侧间隔相等，因此项目之间的间距大于项目与边框之间的间距。

（4）align-items项目在交叉轴上的对齐方式。center居中；stretch默认值，若是项目未设置高度或者auto，那么将占满整个容器的高度。

2二、移动端常见的问题（参考地址： http://www.open-open.com/lib/view/open1449325854077.html）

（1）移动端click屏幕产生200-300ms的延时响应

使用fastclick解决手机上点击事件的300ms延迟；
zepto的touch模块，tap事件也是为了解决在click的延迟问题。

（2）点击元素产生背景或者边框怎么去掉

ios用户点击一个连接会出现一个半透明灰色遮罩，若是想要禁用，可设置-webkit-tap-highlight-color的alpha值为0
android用户点击一个连接，会出现一个边框或者半透明灰色遮罩，可设置-webkit-tap-highlight-color的alpha值为0
winphone系统，点击标签产生的灰色半透明背景，经过设置<meta name="msapplication-tap-highlight" content="no">去掉
有些机型去不掉，如小米2，对于按钮类还有个方法，不要使用a标签或者input标签，直接用div标签

 
               a,button,input,textarea { 
              
               -webkit-tap-highlight- 
               color 
               : rgba( 
               0 
               , 
               0 
               , 
               0 
               , 
               0 
               ); 
              
               -webkit-user-modify: read-write-plaintext-only; // -webkit-user-modify有个反作用，就是输入法再也不可以输入多个字符 
              
               } 
              
               // 或者 
              
               * { 
              
               -webkit-tap-highlight- 
               color 
               : rgba( 
               0 
               , 
               0 
               , 
               0 
               , 
               0 
               ); 
              
               } 
              
               // winphone下 
              
               <meta name= 
               "msapplication-tap-highlight"  
               content= 
               "no" 
               >

（3）美化表单元素

 
               // 
               1 
               、使用appearance改变webkit浏览器的默认外观 
              
               input,select { -webkit-appearance:  
               none 
               ; appearance:  
               none 
               ; } 
              
               //  
               2 
               、winphone下，使用伪元素改变表单元素默认外观 
              
               //  
               2.1  
               禁用select默认箭头，::ms-expand修改表单控制下拉箭头，设置隐藏并使用背景图片来修饰 
              
               select::ms-expand {  
               display 
               : 
               none 
               ; } 
              
               //  
               2.2  
               禁用radio和checkbox默认样式，::ms-check修改表单复选框或者单选框默认图标，设置隐藏并使用背景图片来修饰 
              
               input[type=radio]::ms-check, input[type=checkbox]::ms-check { 
               display 
               :  
               none 
               ;} 
              
               //  
               2.3  
               禁用pc端表单输入框默认清除按钮，::ms-clear修改清除按钮，设置隐藏并使用背景图片来修饰 
              
               input[type=text]::ms-clear,input[type=tel]::ms-clear,input[type=number]::ms-clear { 
               display 
               : 
               none 
               ;}

（4）input在ios下，输入的时候英文首字母默认大写，怎么解决？

 
                < 
                input  
                autocapitalize="off" autocorrect="off" />

（5）消除transition闪屏

 
                .css { 
               
                -webkit-transform-style: preserve 
                -3 
                d; 
               
                -webkit-backface- 
                visibility 
                :  
                hidden 
                ; 
               
                -webkit-perspective:  
                1000 
                ; 
               
                }

2三、Vue1.0和2.0的区别

（1）生命周期

2.0生命周期变得更加语义化了，增长了beforeUpdate、updated等，删除了attached、detached。

（2）过滤器

2.0将1.0全部自带的过滤器都删除了，咱们须要本身定义过滤器：

 
               Vue.filter( 
               'toDou' 
               ,  
               function 
               (n, a, b) { 
              
               return  
               n < 10? n + a + b :  
               ''  
               + n; 
              
               })

若是想展现JSON数据，不须要调用过滤器了，框架会自动帮咱们解析出来；
2.0过滤器的传参方式不是之前的方式，是以函数传参的方式：

 
               //1.0 {{ msg | mimi '12' '5' }} 
              
               //2.0 {{ msg | mimi('12', '5') }}

（3）循环

在Vue2.0中丢弃了$index和$key，将track-by替换成key属性，以便它能跟踪每一个节点的身份，从而重用和从新排序现有元素。

（4）片断代码

在编写template的时候，2.0必需要用一个根元素（如div）将代码片断包裹起来，不然报错。1.0则不须要。

（5）el属性绑定的元素，限制为一个普通的元素，不能再绑定再body、html元素上。

（6）v-model增长了.trim、.number等后缀修饰符