计算属性缓存：method和computed？

计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以text只要不改变，计算属性也就不更新。使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。

什么是dom？

知乎回答：https://www.zhihu.com/question/34219998

v-bind绑定class和style

1. 绑定class：可以跟原class共存，可以绑定多个class。绑定class对象，绑定class数组。可以利用三元表达式进行class的条件切换，同时也可以用computed和method进行更复杂的class条件选择。
2. 绑定style，类似直接添加样式，同样可以绑定对象和数组。使用:style时，Vue.js会自动给特殊的css属性名称增加前缀，比如transform。

指令集合

1. v-cloak：是一个解决初始化慢导致页面闪动的最佳实践，常常与display:none配合使用。
2. v-once：定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。
3. v-if、v-else-if、v-else：条件渲染指令。Vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染。使用Vue扣提供的key属性，它可以让你自己决定是否要复用元素，key的值必须是唯一的。
4. v-show：用法与v-if基本一致，只不过v-show是改变元素的css属性display。当v-show表达式的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式display:none。v-show不能再template上使用。
5. v-for：当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for。它的表达式需结合in来使用，类似item in items的形式。遍历数组和对象，关键字key，index。
6. v-show和v-if：v-if和v-show具有类似的功能，不过v-if才是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为false，则一开始元素／组件并不会渲染，只有当条件第一次变为真时才开始编译。
7. 修饰符: stop,prevent,capture,self,once以及按键修饰符keyCode,还有一些快捷别名：enter,tab,delete,esc,space,up,down,right,left可以配合ctrl,alt,shift,meta使用

<a @click.stop="handle"></a>
<form @submit.prevent="handle"></form>
<a @click.stop.prevent="handle"></a>
<form @submit.prevent></form>
<div @click . capture="handle">...</div>
<div @click.self="handle" >... </div>
<div @click.once="handle" >... </div>

数组更新：

1. push,pop,shift,unshift,splice,sort,reverse 会改变原有数组
2. filter,concat,slice 返回新数组
3. Vue 在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化地复用DOM元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心性能问题。需要注意的是，以下变动的数组中，Vue是不能检测到的，也不会触发视图更新：
   • 通过索引直接设置项，比如app.books[3] = {…}.
     • 方案一：使用Vue内置的set方法：Vue.set(app.books, 3 ,{…}）如果是在webpack中使用组件化的方式（进阶篇中将介绍〉，默认是没有导入Vue的，这时可以使用$set，this.$set(app.books, 3 ,{…}）
     • 方案二：使用splice：app.books.splice(3,1,{…})
   • 修改数组长度，比如app.books.length = 1.
     • 方案：app.book.splice(1)