重温vue，一些知识点简单记录。
1、我们都知道当数据变化时，视图会重新渲染。注意：只有当vue实例被创建时，data中存在的属性才是响应式的。后续新添加的属性不会触发视图变化。
使用 Object.freeze() 会阻止修改现有属性，也就意味着响应系统不能再追踪变化。此时强行修改 会报错。
1 let data = { seen: true } 2 Object.freeze(data); 3 let app3 = new Vue({ 4 el: '#app3', 5 data: data 6 });
2、不要在选项属性上或者回调使用 箭头函数。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所期的vue实例，经常会报如下错。
Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
3、v-bind 指令。在布尔值的情况下，它们的存在即为true。
<button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值为 null，false，undefined 时，disabled 属性甚至不会被渲染在 button 元素中。
4、对于所有的数据绑定，vue提供了完整的数据表达式支持。有个限制：每个绑定只能是包含单个表达式。
1 <div id="app8"> 2 {{number + 1}} 3 {{ active ? 'active' : 'not-active'}} 4 {{ message.split('').reverse().join('') }} 5 <div :id=" 'list-' + id "></div> 6 </div>
模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
5、对于任何的逻辑都应该使用 计算属性。
计算属性 和 方法 都可以实现 字符串反转效果，如下：（计算属性不用加 括号，方法需要加 括号）
1 <span>{{newMessage}}</span> 2 <p>计算属性-逆转：{{ reverseMessage2 }}</p> 3 <p>方法-逆转：{{ reverseMessage2() }}</p>
注意：计算属性是根据它们的依赖进行缓存的，只要依赖不发生变化，计算属性就可以立即拿到计算结果，而不用再次执行函数。
相比之下，每次触发渲染时，方法总是会再次调用。
6、侦听属性 watch -- 用来观察和响应vue实例上的数据变动。当你的一些数据随其他数据变化时，很容易滥用watch，通常更好地做法是使用计算属性而不是命令式的watch回调。
计算属性默认只有 getter，在需要时也可以提供一个setter。
7、绑定HTML class
对象语法、数组语法(可以嵌套对象语法)
用在组件上，当在一个自定义组件上使用class时，这些class会被添加到该组件的根元素。并且不会覆盖原有的class。
8、绑定内联样式
对象语法 -- css 可以使用驼峰式，也可以使用短横线分隔(一定要用单引号括起来)。对象语法常常结合返回对象的计算属性使用。
数组语法 -- 将多个样式对象应用到同一个元素上。
9、v-if 指令。
v-if 使用时，是作用在一个元素上，当需要作用在多个元素上可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
10、通过 key 管理可复用元素。vue会尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。
11、v-show 只是根据条件显示或者隐藏，始终被渲染并保留在DOM中。注意：v-show 不支持 template 也不支持 v-else 。
与 v-if 对比，v-if 有更大的切换开销，v-show 有更大的渲染开销。因此，如果元素需要频繁的切换，使用v-show较好，如果运行时条件很少改变，使用v-if较好。
12、vue包含一组观察数组的变异方法。它们会触发视图的变化。
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
vue 不能检测以下数组的变动：利用索引值直接设置一个项、改变数组长度。
vue 不能检测对象属性的增加或删除。
但是可以使用全局方法 Vue.set(object, key, value) 方法来替代上面方法，以触发视图更新。
如果要添加多个属性，参看：https://cn.vuejs.org/v2/guide/list.html
13、使用 计算属性来 筛选或者过滤 数据额，而不是重新备份data。计算属性不合适时，使用方法。
1 <div> 2 <span>使用计算属性来筛选或过滤，而不是备份数据</span> 3 <ul> 4 <li v-for="n in reverseNumber">{{n}}</li> 5 </ul> 6 <span>计算属性不合适时(例如在v-for循环中)，使用方法</span> 7 <ul> 8 <li v-for="n in sort(numbers)">{{n}}</li> 9 </ul> 10 </div>
1 data: { 2 numbers: [1,5,2,6,9,4,3,7] 3 }, 4 computed: { 5 reverseNumber: function() { 6 return this.numbers.sort().reverse(); 7 } 8 }, 9 methods: { 10 sort: function(data) { 11 return data.sort(); 12 } 13 }
v-for 也可以取整数，它将重复多次模板。
1 <div> 2 <span v-for="n in 10">{{n}}</span> 3 </div>
14、v-for 和 v-if 作用于同一节点时。
v-for 比 v-if 优先级要高，这就意味着 v-if 要重复运行与每一个循环中。
15、事件修饰符
.stop、.prevent、.capture、.self、.once、.passive 这些修饰符可以组合使用，使用时顺序很重要。
16、按键修饰符
1 <!-- 只有 keycode 是 13 时，调用 submit --> 2 <input type="text" @keyup.13="submit">
常用按键别名：.enter、.tab、.delete、.space、.esc、.up、.down、.right、.left
可以通过全局 config.keycodes 自定义按键修饰符别名， Vue.config.keycodes.f1 = 112
17、系统修饰键
.ctrl、.alt、.meta、.shift
1 <!-- ctrl + enter(13) 才能触发此函数 --> 2 <input type="text" @keyup.ctrl.13="submit">
.exact 修饰符。允许你控制由精确的系统修饰符组合触发的事件。
18、表单处理
在文本域插值(<textarea></textarea>)并不会生效，应该使用 v-model 来绑定。
修饰符：.lazy、.number、.trim