VUE （计算属性）
计算属性：computed + watch + methods
computed: {
xxx : function(){
return 表达式
}}
computed:基于缓存，检测data数据是否改变
当数据没有改变时，多次调动该函数，但函数不会执行
表达式中调用this.data中的属性，当data数据改变，(函数才会执行)表达式会重新计算，并返回。
但是在methods中
methods:{
xxx : function () {
return 表达式
}}
多次调用，xxx会被执行多次，不管data数据是否改变，但是发现表达式的返回结果一样，DOM也不会重新渲染
watch: {
title() {
}}
零、computed watch methods的使用场景
computed：
--当依赖某些状态（state）产生新值的时候，优先选择使用computed：
watch：
--用来解决beforeUpdate,updated，两个钩子里修改状态导致死循环的问题，采用watch
--监测可能异步改变值的时候
methods：
--定义事件响应函数
--定义组件公共处理函数
一、computed 和 methods 的区别
1、相同点
如果作为模板的数据显示，二者都能实现相应的功能，唯一不同的是methods定义的方法需要执行。
2、不同点
-- computed 会基于响应数据缓存，methods不会缓存（但是在绚烂DOM时会判断DOM是否改变，改变时才会重新渲染DOM）
-- diff之前先看data里的数据是否发生变化，如果没有变化computed的方法不会执行，但methods里的方法会执行
二、watch vs computed
1、相同点
如果作为信息展示，二者可以实现相同的功能。不同点是watch可能需要监听更过的属性。在这个时候我们优先使用computed
2、不同点
-- 当想在更新data数据后再次更新数据的时候，不能使用updated生命周期钩子。建议使用watch来监听data数据的变化
-- 使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
三、如何使模板重新渲染
1、只要改变data里的数据就会可能触发模板渲染
2、如果经过diff算法比较后，发现更新前后更新后的虚拟DOM相同，就不会渲染模板
Class与Style绑定
v-bind:xxx="表达式结果类型：可以是字符串，可以是对象，还可以是数组"
v-bind:class="[]"
v-bind:style="xxx"
v-bind:class="{}" 对象且可以深拷贝
兼容性
1.自动添加前缀：当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
2.多重值：从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，
条件渲染
v-if 和 v-else 中间不能有元素（切记）
v-else-if
<template>包裹条件的模板标签，条件写在template上，但渲染后不会有该标签</template>
:key 相同标签的独立性
注意，<label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。
v-show(boolean) -- 判断，显示隐藏
v-for同时和v-if存在同标签判断中！v-for优先！
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，
v-for="(item,index） of/in 数组/对象"
v-for可以接收三个参数，value，key，index
v-if 和 v-show 的区别
DOM是真正否渲染！DOM是否隐藏，一定会渲染！
数组
变异方法:可以改变原数组的方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换数组:不会改变原数组，而是返回一个新数组
filter()
concat()
slice()
注意：
由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength
目前2.0版本为了解决这个问题：使用set
vm.$set(监听操作)
Vue.set(监听操作)
vue2.0使用definpropty监测对象，
对数组下标可以操作，但不会响应
vue3.0即将使用es6的监听方法，解决响应问题
事件处理
v-on:事件="xxx(yy)"注意可以传参
表单
v-model： 可以使用在<input><textarea><select>元素上创建双向数据绑定，在select中的option没有value时，默认为html中的内容
多行文本：
在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。
如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >
.number
.trim 去除首尾空白字符
事件修饰符
.stop -- 阻止单机事件继续传播
.prevent -- 提交事件不在重载加载页面
.capture -- 添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self -- 必须在绑定元素上
.once -- 执行一次
.passive -- 取消默认事件
注意事件修饰符可以多个使用，但需要注意执行顺序
.exact 精准控制组合触发事件
Rxjs：定义对象是否可观察