安装:
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
},
}
