最近一直在搞 Vue 项目，整了一段时间，项目的基本功能算是完善了。项目地址：ymatou，有兴趣的小伙伴可以瞧瞧指点一下，顺便点个星星就再好不过了，啊哈哈哈。
今天有空来总结一下关于 Vue 的一些知识点
1.v-if 和 v-show 区分使用场景
- v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。
- 运用场景：v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。
2.computed 和 watch 区分使用场景
- computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。
- watch：更多的是 “观察” 的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作。
- 运用场景：当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
3.v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
- 使用 v-for 更新已渲染的元素列表时,默认用就地复用策略；列表数据修改的时候,他会根据 key 值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素。例如：有一个列表我们现在在中间插入了一个元素，Diff 算法会默认复用之前的列表并在最后追加一个，所以我们需要使用 key 来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点，找到正确的位置区插入新的节点。不建议使用 index(即数组的下标)来作为 key。
- v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。
4.vue 生命周期（钩子函数）
- beforeCreate、created（可以在 created 中首次拿到 data 中定义的数据）、beforeMount、mounted（dom 树渲染结束，可访问 dom 结构）、beforeUpdate、updated、beforeDestroy、destroyed
5.$nextTick
- 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
- 解决的问题：有些时候在改变数据后立即要对 dom 进行操作，此时获取到的 dom 仍是获取到的是数据刷新前的 dom，无法满足需要，这个时候就用到了$nextTick。
new Vue({
// ...
methods: {
// ...
example: function () {
// 修改数据
this.message = 'changed'
// DOM 还没有更新
this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
this.doSomethingElse()
})
}
}
})
6.组件间的传值
6.1 props
- 父传子的方法，props 值可以是一个数组或对象。
// 数组:不建议使用
props:[]
// 对象
props:{
inpVal:{
type:Number, //传入值限定类型
// type 值可为String,Number,Boolean,Array,Object,Date,Function,Symbol
// type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认
required: true, //是否必传
default:200, //默认值,对象或数组默认值必须从一个工厂函数获取如 default:()=>[]
validator:(value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
6.2 $emit
- 触发子组件触发父组件给自己绑定的事件，其实就是子传父的方法。
// 父组件
<home @title="update">
// 子组件
this.$emit('title',[{title:'这是title'}])
6.3 vuex
- 适合数据共享多的项目里面，因为如果只是简单的通讯，使用起来会比较复杂。
state:定义存贮数据的仓库 ，可通过this.$store.state 或mapState访问
getter:获取 store 值，可认为是 store 的计算属性，可通过this.$store.getter 或 mapGetters访问
mutation:同步改变 store 值，为什么会设计成同步，因为mutation是直接改变 store 值，vue 对操作进
行了记录，如果是异步无法追踪改变.可通过mapMutations调用
action:异步调用函数执行mutation，进而改变 store 值，可通过 this.$dispatch或mapActions访问
modules:模块，如果状态过多，可以拆分成模块，最后在入口通过...解构引入
6.4 provide / inject
- 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
6.5 Vue.observable
- 让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。 返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景。
6.6 $listeners
- 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件—在创建更高层次的组件时非常有用。
