vue面试,有这一篇就足够了(待续更新,收藏不迷路)

安装:

vue不支持iE8及如下版本的缘由:由于vue使用了ie8没法模拟的es5特性,  
但它支持全部兼容es5的浏览器(兼容性查询网址Can I Use:https://www.caniuse.com/);  
vue最新稳定版本为2.6.11;  
使用vue时,推荐在浏览器安装vue devtools插件,咱们能够更好的修改调试vue;  
vue的引入方式有两种:1是直接用script引入,2是使用npm或yarn等包管理工具直接下载;  
vue的脚手架的做用:提供了batteries-include的构建设置,而且带有热重载保存时lint校验等等;  
vue脚手架安装方式:npm install -g @vue/cli或yarn global add @vue/cli  
(注意:这是vue-cli3的安装方式,若是安装了旧版本,须要先卸载:npm uninstall vue-cli -g);  
vue建立新项目:vue create my-project或vue ui;  
vue拥有四种构建版本:完整版,只包含运行时版,完整版(生产环境),只包含运行时版(生产环境);  
(注意:官方推荐使用运行时版,能够节省30%空间)

安装常见知识点:

1.vue优势？  
答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；  
简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；  
双向数据绑定：保留了angular的特色，在数据操做方面更为简单；  
组件化：保留了react的优势，实现了html的封装和重用，在构建单页面应用方面有着独特的优点；  
视图，数据，结构分离：使数据的更改更为简单，不须要进行逻辑代码的修改，  
只须要操做数据就能完成相关操做；  
虚拟DOM：dom操做是很是耗费性能的， 再也不使用原生的dom操做节点，极大解放dom操做，  
但具体操做的仍是dom不过是换了另外一种方式；  
运行速度更快:相比较与react而言，一样是操做虚拟dom，就性能而言，vue存在很大的优点。  
2.vue的两个核心点  
答：数据驱动、组件系统  
数据驱动：ViewModel，保证数据和视图的一致性。  
组件系统：应用类UI能够看做所有是由组件树构成的。  
3.vue和jQuery的区别  
答：jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操做，  
其实和原生的HTML的区别只在于能够更方便的选取和操做DOM对象，而数据和界面是在一块儿的。  
好比须要获取label标签的内容：$("lable").val();,它仍是依赖DOM元素的值。  
Vue则是经过Vue对象将数据和View彻底分离开来了。对数据进行操做再也不须要引用相应的DOM对象，  
能够说数据和View是分离的，他们经过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。  
4.单页面应用和多页面应用区别及优缺点  
答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载全部  
必须的 html, js, css。全部的页面内容都包含在这个所谓的主页面中。但在写的时候，仍是会  
分开写（页面片断），而后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。  
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新  
单页面的优势：  
用户体验好，快，内容的改变不须要从新加载整个页面，基于这一点spa对服务器压力较小；先后端分离；  
页面效果会比较炫酷（好比切换页面内容时的专场动画）。  
单页面缺点：  
不利于seo；导航不可用，若是必定要导航须要自行实现前进、后退。（因为是单页面不能用浏览器的前进后退功能，  
因此须要本身创建堆栈管理）；初次加载时耗时多；页面复杂度提升不少。  
5.mvvm 框架是什么？  
答：vue是实现了双向数据绑定的mvvm框架，当视图改变动新模型层，当模型层改变动新视图层。  
在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

介绍:

1.vue是什么?  
答:Vue是一套用于构建用户界面的渐进式框架.与其余大型框架不一样的是,vue被设计为能够自底像上逐层引用.  
vue的核心库只关注图层,不只上手容易,还方便与第三方库结合.另外一方面,当vue与现代化工具链以及支持类库结合使用时也彻底  
可以为复杂的单页面应用提供驱动.  
2.vue的核心是一个容许采用简洁的模板语法来声明式地将数据渲染进DOM系统;  
指令带有前缀v-,表示它们是vue提供的特殊 attribute;  
3.过渡效果  
vue在插入,更新,移除DOM的时候,提供多种不一样方式的应用过渡效果:  
在css过渡和动画中自动应用css;配合第三方动画库,如animate.css;在过渡钩子函数使用javascript直接操做DOM;配合第三方js动画库,  
如Velocity.js;  
4.过渡的类名  
在进入/离开的过渡中,有6个class切换:  
1)v-enter:定义进入过渡的开始状态.在元素被插入以前生效,在元素被插入以后的下一帧移除.  
2)v-enter-active:定义进入过渡生效时的状态.在整个进入过渡的阶段中应用,在元素被插入以前  
生效,在过渡/动画完成以后移除.这个类能够被用来定义进入过渡的过程时间,延迟和曲线函数.  
3)v-enter-to:2.1.8版本及以上定义进入过渡的结束状态.在元素被插入以后下一帧生效(与此同时v-enter被移除),  
在过渡/动画完成以后移除.  
4)v-leave:定义离开过渡的开始状态.在离开过渡被触发时马上生效,下一帧被移除.  
5)v-leave-active:定义离开过渡生效时的状态.在整个离开过渡的阶段中应用,在离开过渡  
被触发时马上生效,在过渡/动画完成以后移除.这个类能够被用来定义离开过渡的过程时间,延迟和曲线函数.  
6)v-leave-to:2.1.8版本及以上定义离开过渡的结束状态.在离开过渡被触发以后的下一帧生效(与此同时v-leave被删除),  
在过渡/动画完成以后移除.  
总结:v-enter=>v-enter-to=>v-leave=>v-leave-to,在v-enter到v-enter-to之间,有v-enter-active,  
在v-leave到v-leave-to之间,存在v-leave-active.  
5.过渡模式  
in-out:新元素先进行过渡,完成以后当前元素过渡离开.  
out-in:当前元素先进行过渡,完成以后新元素过渡进入.  
6.动态组件  
在tab页面切换时,推荐使用动态组件.v-bind:is="currentTabComponent",此处的currentTabComponent能够包括已注册组件的名字或  
一个组件的选项对象.  
可是在tab切换的时候,若是咱们想要点击tab切换以后,缓存咱们以前的操做页面,能够在动态组件外面套用<keep-alive></keep-alive>,  
这样的话失活的组件将会被缓存.  
7.异步组件  
new Vue({  
 components:{ 'my-component':()=>import('./my-async-component') }});  
推荐作法是将异步组件和webpack的code-spliting功能一块儿配合使用,如  
Vue.component('async-webpack-example',function(resolve){  
 // 这个特殊的\`require\`语法将会告诉webpack // 自动将你的构建代码切割成多个包,这些包 // 会经过ajax请求加载 require(\['./my-async-component'\],resolve)})

介绍常见知识点:

1.vue与其余框架的对比?  
答:vue和react类似之处:使用了virtual Dom;提供了响应式(reactive)和组件化(composable)的视图组件;将注意力集中保持在  
核心库,而将其余功能如路由和全局状态管理交给相关的库.  
vue与react和angular不一样之处:  
1)运行时的性能:  
在react应用中,当某个组件的状态发生变化时,他会以该组件为根,从新渲染整个组件子树.  
若是避免没必要要的子组件重复渲染,须要在全部可能的地方使用PureComponent,或者是手动实现shouldComponentUpdate方法.  
同时,你可能会须要使用不可变的数据结构来使得你的组件更容易被优化,可是使用PureComponent和shouldComponentUpdate时,须要  
保证该组件的整个子树的渲染输出都是由该组件的props决定的.若是不符合这个状况,那么此类优化就会致使难以察觉  
的渲染结果不一致;  
在vue应用中,组件的依赖是在渲染过程当中自动跟踪的,因此系统能精确知晓哪一个组件确实须要被重渲染.  
能够理解为每个组件都已经自动获取了shouldComponentUpdate,而且没有上述的子树问题限制;  
在angular应用中,当watcher愈来愈多时,会变得愈来愈慢,由于做用域的每一次变化,全部的watcher都要从新计算.  
而且,若是一些watcher触发另外一个更新,脏检查循环(digest cycle)可能要运行屡次.  
angular用户经常要使用深奥的技术,来解决脏检查循环的问题.但vue没有这个问题,它不使用脏  
检查,它是基于依赖跟踪的观察系统而且异步队列更新,全部的数据变化都是独立触发的,除非它们之间有明确的依赖关系.  
2)HTML&CSS:  
在react应用中,使用了jsx,jsx是使用XML语法编写的js的一种语法糖.  
使用jsx的渲染函数有下面这些优点:你可使用完整的编程语言javascript功能来构建你的视图页面.好比你可使用临时变量,  
js自带的流程控制,以及直接引用当前js做用域中的值等;开发工具对jsx的支持相比于现有可用的vue模板仍是比较先进的  
(好比,linting,类型检查,编辑器的自动完成).  
在vue应用中,使用了模板template.  
模板template相对于jsx的优点:模板更容易接受和读写,使用者不须要单独学习XML语法,下降学习成本,上手容易;  
基于HTML的模板使得将已有的应用逐步迁移到vue更容易;让设计图和新人开发者更容易理解和参与到项目中;  
可使用其余模板预处理器,好比Pug来书写Vue的模板.从抽象的角度来看,更推荐在偏视图表现类的组件里使用模板,在  
偏逻辑的组件中使用jsx和渲染函数.  
3)组件做用域的Css  
这里react和vue的主要区别是,vue设置样式的默认方法是单文件组件里相似style的标签.大部分状况下,咱们都会在style  
里面添加一个scoped属性,该属性会自动添加一个惟一的属性(好比 data-v-2155b78)为组件内css指定做用域,  
编译的时候,会在css类目后面添加\[data-v-2155b78\].最后,vue的单文件组件里的样式  
设置是很是灵活的,经过vue-loader,可使用任意预处理器,后处理器,甚至深度集成css module---所有都在<style>标签内.  
4)路由库和状态管理库  
react把路由库和状态管理库交给社区维护;  
vue把路由库和状态管理库交给官方维护,而且与核心库同步更新;  
5)学习曲线  
react学习曲线陡峭,在学习react以前,你须要知道jsx和es2015,须要学习构建系统;  
angular学习曲线很是陡峭,由于angular自己的设计目的,就是针对大型复杂的应用,学习成本高;  
vue学习曲线教平和,向上扩展比如react,向下扩展就相似jquery,只须要引入script便可,入手容易简单;  
6)原生渲染  
react native能够用相同的组件模型编写有本地渲染能力的App(ios和android).能同时跨多平台开发;  
vue此处还处于劣势,虽然vue和weex进行合做,可是weex基本上已经被阿里巴巴放弃了;  
7)语法  
vue的一些语法和angular很类似(例如 v-if和ng-if).由于angular是vue早期开发的灵感来源.可是angular中存在的许  
多问题(好比脏检查),在vue中已经避免和解决.  
8)组件和指令  
在vue中指令和组件分的更清晰.指令只封装DOM操做,而组件表明了一个自给自足的独立单元--有本身的视图和数据逻辑.  
在angular中,每件事都由指令来作,而组件只是一个特殊的指令.  
9)数据绑定  
angular使用了双向绑定  
vue在不一样组件间,强制使用单向数据流.  
2.v-if和v-show的区别?  
答:共同点：都能控制元素的显示和隐藏；  
不一样点：实现本质方法不一样，v-show本质就是经过控制css中的display设置为none，控制隐藏，只会编译一次；  
v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。并且v-if不停的销毁和建立比较消耗性能。  
总结：若是要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。若是不须要频繁切换某节点使  
用v-if（初始渲染开销较小，切换开销比较大）。  
优先级:当 v-if 与 v-for 一块儿使用时，v-for 具备比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每一个 v-for 循环中。  
因此，不推荐v-if和v-for同时使用。  
若是v-if和v-for一块儿用的话，vue中的的会自动提示v-if应该放到外层去。  
3.当插入或删除包含在transition组件中元素时,vue作了哪些处理?  
答:1)自动嗅探目标元素是否应用了css过渡或动画,若是是,在恰当的时机添加/删除css类名;  
2)若是过渡组件提供了js钩子函数,这些钩子函数会在恰当的时机被调用;  
3)若是没有找到js钩子函数或css过渡/动画,DOM操做(插入/删除)在下一帧中当即执行.  
(注意:此指浏览器逐帧动画机制,和vue的nextTick概念不一样).  
4.为何使用key?  
答：须要使用key来给每一个节点作一个惟一标识，Diff算法就能够正确的识别此节点。  
做用主要是为了高效的更新虚拟DOM.  
5.说出几种vue当中的指令和它的用法？  
答：v-model双向数据绑定；  
v-for循环；  
v-if v-show 显示与隐藏；  
v-on事件；v-once: 只绑定一次。  
6.v-model的使用?  
答：v-model用于表单数据的双向绑定,其实它就是一个语法糖，这个背后就作了两个操做：  
v-bind绑定一个value属性；  
v-on指令给当前元素绑定input事件。  
7.vue中双向数据绑定是如何实现的？  
答：vue双向数据绑定是经过数据劫持结合发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，  
视图变化，数据也随之发生改变；  
核心:关于vue双向数据绑定,其核心是Object.defineProperty()方法。  
8.css动画和css过渡的区别?  
答:在动画中v-enter类名在节点插入dom后不会当即删除,而是在animationend事件触发时删除.  
9.在一些场景中,须要给同一个元素设置多种过渡动效,好比animation很快的被触发并完成了,  
可是transition效果还没结束,这种状况怎么处理?  
答:须要使用type attribute并设置animation或transition来明确声明你须要vue监听的类型.  
10.v-on能够监听多个方法吗？  
答：能够，栗子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。

vue实例

1.vue实例在建立的时候,经历的过程:设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM.  
2.不要在选项属性或回调上使用箭头函数,好比created:()=>console.log(this.a)或  
vm.$watch('a',newValue=>this.myMethod()).由于箭头函数并无this,this会做为变量一直  
向上级词法做用域查找,直到找到为止,常常致使Uncaught TypeError:Cannot read property of undefined或  
Uncaught TypeError:this.myMethod is not a function 之类的错误.  
3.vue的生命周期函数:beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyed

vue实例常见知识点

1.简述每一个周期具体适合哪些场景?  
答:beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其余的东西都还没建立。在beforeCreate生命  
周期执行的时候，data和methods中的数据都尚未初始化。不能在这个阶段使用data中的数据和methods中的方法  
 create：data 和 methods都已经被初始化好了，若是要调用 methods中的方法,或者操做data 中的数据，最先能够在这个阶段中操做 beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，可是尚未挂载到页面中，此时，页面仍是旧的 mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了建立阶段，进入到了运行阶段。若是咱们想要通 过插件操做页面上的DOM节点，最先能够在和这个阶段中进行 beforeUpdate： 当执行这个钩子时，页面中的显示的数据仍是旧的，data中的数据是更新后的， 页面尚未和最新的数据保持同步 updated：页面显示的数据和data中的数据已经保持同步了，都是最新的 beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上全部的 data 和 methods ，指令，过滤器 ……都是处于可用状 态。尚未真正被销毁 destroyed： 这个时候上全部的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
2.第一次页面加载会触发哪几个钩子?  
答:beforeCreate,created,beforeMount,mounted  
3.created和mounted的区别?  
答：created:在模板渲染成html前调用，即一般初始化某些属性值，而后再渲染成视图。  
mounted:在模板渲染成html后调用，一般是初始化页面完成后，再对html的dom节点进行一些须要的操做。  
4.vue获取数据在哪一个周期函数  
答：通常 created/beforeMount/mounted 皆可.  
好比若是你要操做 DOM , 那确定 mounted 时候才能操做.  
5.mvvm 框架是什么？  
答:vue是实现了双向数据绑定的mvvm框架，当视图改变动新模型层，当模型层改变动新视图层。  
在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。  
6.请详细说下你对vue生命周期的理解？  
答：总共分为8个阶段建立前/后，载入前/后，更新前/后，销毁前/后。  
建立前/后： 在beforeCreated阶段，vue实例的挂载元素$el和\*\*数据对象\*\*data都为undefined，还未初始化。在created阶段,vue实例  
的数据对象data有了，$el尚未。  
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但仍是挂载以前为虚拟的dom节点，data.message还未替换。  
在mounted阶段，vue实例挂载完成，data.message成功渲染。  
更新前/后：当data变化时，会触发beforeUpdate和updated方法。  
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，  
可是dom结构依然存在。  
7.vue初始化页面闪动问题?  
答：使用vue开发时，在vue初始化以前，因为div是不归vue管的，因此咱们写的代码在尚未解析的状况下会容易出现花屏现象，  
看到相似于{{message}}的字样，虽然通常状况下这个时间很短暂，可是咱们仍是有必要让解决这个问题的。  
首先：在css里加上\[v-cloak\] {  
 display: none; }。若是没有完全解决问题，则在根元素加上 :  
8.SPA首屏加载慢如何解决  
答：安装动态懒加载所需插件；使用CDN资源。  
9.vue组件中data为何必须是一个函数？  
答：由于JavaScript的特性所致使，在component中，data必须以函数的形式存在，不能够是对象。  
组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，  
至关于每一个组件实例都有本身私有的数据空间，它们只负责各自维护的数据，不会形成混乱。而单纯的写成对象形式,就是全部的组件实  
例共用了一个data，这样改一个全都改了。  
10.$nextTick的使用  
答：当你修改了data的值而后立刻获取这个dom元素的值，是不能获取到更新后的值，  
你须要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素以后在获取，才能成功  
11.vue父组件子组件传递数据？  
答：父组件传子组件经过props,子组件传父组件经过$emit方法  
12.如何获取dom?  
答：ref="domName" 用法：this.$refs.domName  
13.如何让CSS只在当前组件中起做用？  
答：在组件中的style前面加上scoped  
14.<keep-alive></keep-alive>的做用是什么?  
答:keep-alive 是 Vue 内置的一个组件，可使被包含的组件保留状态，或避免从新渲染。  
15.请说出vue.cli项目中src目录每一个文件夹和文件的用法？  
答：assets文件夹是放静态资源；components是放组件,router是定义路由相关的配置;app.vue是一个应用主组件；main.js是入口文件。  
16.分别简述computed和watch的使用场景  
答：computed:  
 当一个属性受多个属性影响的时候就须要用到computed 最典型的栗子： 购物车商品结算的时候 watch: 当一条数据影响多条数据的时候就须要用watch 栗子：搜索数据17.assets和static的区别  
答：  
相同点：assets和static两个都是存放静态资源文件。项目中所须要的资源文件图片，字体图标，样式文件等均可以放在这两个文件下，  
这是相同点  
不相同点：assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，  
 所谓打包简单点能够理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同 上传至服务器。 static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。 由于避免了压缩直接进行上传，在打包时会提升必定的效率，可是static中的资源文件因为没有进行压缩等操做，因此文件的体积也 就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。建议：将项目中template须要的样式文件js文件等均可以放置在assets中，走打包这一流程。减小体积。而项目中引入的第三方的资源文  
件如iconfoont.css等文件能够放置在static中，  
由于这些引入的第三方文件已经通过处理，咱们再也不须要处理，直接上传。  
18.vue经常使用的修饰符  
答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；  
 .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（若是事件可取消，则取消该事件， 而不中止事件的进一步传播）； .capture：与事件冒泡的方向相反，事件捕获由外到内； .self：只会触发本身范围内的事件，不包含子元素； .once：只会触发一次。

模板语法

1.Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 可以智能地计算出最少须要从新渲染多少组件，并把DOM操做次数减到最少。  
 1)文本:数据绑定最多见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：<span>Message: {{ msg }}</span> 经过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。 
 2)原始HTML:双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你须要使用 v-html 指令. 注意事项:你的站点上动态渲染的任意 HTML 可能会很是危险，由于它很容易致使 XSS 攻击。请只对可信内容使用 HTML 插值， 毫不要对用户提供的内容使用插值。   3)Attribute:Mustache 语法不能做用在 HTML attribute 上，遇到这种状况应该使用 v-bind 指令 注意事项:若是 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含 在渲染出来的 <button> 元素中。 
 4)使用 JavaScript 表达式:每一个绑定都只能包含单个表达式，因此下面的例子都不会生效。                       <!-- 这是语句，不是表达式 -->  
 {{ var a = 1 }}                       <!-- 流控制也不会生效，请使用三元表达式 -->  
 {{ if (ok) { return message } }} 注意事项:模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不该该在模板表达式中试图 访问用户定义的全局变量
2.指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外状况，稍后咱们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地做用于 DOM。  
 1)参数:v-bind 指令能够用于响应式地更新 HTML attribute;v-on 指令，它用于监听 DOM 事件 
 2)动态参数:从 2.6.0 开始，能够用方括号括起来的 JavaScript 表达式做为一个指令的参数 <!-- 注意，参数表达式的写法存在一些约束，如以后的“对动态参数表达式的约束”章节所述。 --> <a v-bind:\[attributeName\]="url"> ... </a> 例如，若是你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。 一样地，你可使用动态参数为一个动态的事件名绑定处理函数：     <a v-on:\[eventName\]="doSomething"> ... </a>  
 在这个示例中，当 eventName 的值为 "focus" 时，v-on:\[eventName\] 将等价于 v-on:focus。 动态参数预期会求出一个字符串，异常状况下值为 null。这个特殊的 null 值能够被显性地用于移除绑定。任何其它非字符串 类型的值都将会触发一个警告。 
 3)修饰符:修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符 告诉 v-on 指令对于触发的事件调用 event.preventDefault()
3.缩写:v-bind 缩写  
 <!-- 完整语法 --> <a v-bind:href="url">...</a>      <!-- 缩写 -->  
 <a :href="url">...</a> …      v-on 缩写  
 <!-- 完整语法 --> <a v-on:click="doSomething">...</a>      <!-- 缩写 -->  
 <a @click="doSomething">...</a> …

模板语法常见知识点

1.动态参数表达式有一些语法约束，由于某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：  
   <!-- 这会触发一个编译警告 -->  
 <a v-bind:\['foo' + bar\]="value"> ... </a> 变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。   在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还须要避免使用大写字符来命名键名，  
 由于浏览器会把 attribute 名所有强制转为小写：   <!--  
 在 DOM 中使用模板时这段代码会被转换为 \`v-bind:\[someattr\]\`。 除非在实例中有一个名为“someattr”的 property，不然代码不会工做。 --> <a v-bind:\[someAttr\]="value"> ... </a>
2.vue经常使用的修饰符  
 答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡； .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为 （若是事件可取消，则取消该事件，而不中止事件的进一步传播）； .capture：与事件冒泡的方向相反，事件捕获由外到内； .self：只会触发本身范围内的事件，不包含子元素； .once：只会触发一次
3.delete和Vue.delete删除数组的区别  
 答：delete只是被删除的元素变成了 empty/undefined 其余的元素的键值仍是不变。Vue.delete直接删除了数组改变了数组的键值。

计算属性和侦听器

1.计算属性:  
 1)基础例子:计算属性的 getter 函数是没有反作用 (side effect) 的，这使它更易于测试和理解。 
 2)计算属性缓存 vs 方法: 两种方式的最终结果确实是彻底相同的。 然而，不一样的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会从新求值。 这就意味着只要 message 尚未发生改变，屡次访问 reversedMessage 计算属性会当即返回以前的计算结果，而没必要再次执行函数。                  这也一样意味着下面的计算属性将再也不更新，由于 Date.now() 不是响应式依赖：  
                  computed: {  
 now: function () { return Date.now() } } 相比之下，每当触发从新渲染时，调用方法将总会再次执行函数。 为何须要缓存？假设咱们有一个性能开销比较大的计算属性 A，它须要遍历一个巨大的数组并作大量的计算。而后咱们可能有 其余的计算属性依赖于 A 。若是没有缓存，咱们将不可避免的屡次执行 A 的 getter！若是你不但愿有缓存，请用方法来替代。 
 3)计算属性VS侦听属性: Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变更：侦听属性。 <div id="demo">{{ fullName }}</div> var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) 上面代码是命令式且重复的。将它与计算属性的版本进行比较：     var vm = new Vue({  
 el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) 好得多了，不是吗？ 
 4)计算属性的 setter: 计算属性默认只有 getter ，不过在须要时你也能够提供一个 setter ：     // ...  
 computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names\[0\] this.lastName = names\[names.length - 1\] } } } // ... 如今再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
2.侦听器:  
 虽然计算属性在大多数状况下更合适，但有时也须要一个自定义的侦听器。这就是为何 Vue 经过 watch 选项提供了 一个更通用的方法，来响应数据的变化。当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的。 watch: { // 若是 \`question\` 发生改变，这个函数就会运行 question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...' this.debouncedGetAnswer() } } 在这个示例中，使用 watch 选项容许咱们执行异步操做 (访问一个 API)，限制咱们执行该操做的频率，并在咱们获得最终结果前， 设置中间状态。这些都是计算属性没法作到的。

计算属性和侦听器常见知识点

1.分别简述computed和watch的使用场景  
答：computed:  
 当一个属性受多个属性影响的时候就须要用到computed 最典型的场景： 购物车商品结算的时候 watch: 当一条数据影响多条数据的时候就须要用watch 场景：搜索数据
2.v-on能够监听多个方法吗？  
答：能够，<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">  
3.手写一个watch监听?  
答:watch: {  
 year: {
    handler (newValue, oldValue) {
       console.log('时间又过去了1年，今年是' + newValue)            console.log('新值是' + newValue + ',旧值是' + oldValue) 
       }, 
    immediate: true, 
    deep: false 
    },
}