前端-Vue超快速学习

我之前一直使用的React，最近到了新公司，需要使用Vue，虽然之前自己写过一些小demo，但是缺乏系统的学习，且之前自己看的vue1.x的内容，好多都过时了，现在补充一下vue2.x的相关知识。

基础知识：

• vue的生命周期： beforeCreate/created、 beforeMount/mounted、 beforeUpdate/updated、 beforeDestory/destoryed

• vue常用指令： v-for、 v-bind（缩写形式 :prop）、 v-on(缩写形式 @click=’sss')、 v-if/v-else/v-else-if、 v-model、 v-once、 v-html、 v-show...

• vue自定义组件： Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘

• {{ p1 }}
'})

• vue常用实例方法和属性： data/$data、 methods/$methods、 $el、 computed(计算属性)、 $watch、 $set、 $event、 $emit...

• 如果需要更新的属性需要缓存，则使用计算属性的方式，否则可以使用 methods里的方法来更新属性（ methods里的方法每次重新渲染都会执行）

• 计算属性默认提供了 getter，你还可以给它设置 setter

• 当你数据变化是异步或者开销较大时，可以使用 watch侦听器来响应数据的变化

• v-bind:class的值可以是一个对象，可实现类似 react中 classnames模块的功能

• 自定义组件上的 class会被渲染拼接到 template的根节点的 class属性上（自定义组件上可使用 v-bind:class来做class的判断显示逻辑）

• v-bind:style可以用来绑定内联样式，这个内联样式的值可以由一个对象来定义（类似css in js的模式）,且可以被定义为数组(多个样式对象)

• v-bind:style可以使用多重值的形式： 

v-if/v-else/v-else-if的时候，可以用key来管理可复用的元素

v-if是’真正’的渲染，它会确保在切换条件过程中条件块内的元素的事件监听器和子组件适时的销毁和重建

v-if是惰性的，初始为假，什么也不做，直到为真的时候才渲染元素

v-show总是渲染元素，只是简单的进行切换

v-if的切换开销大， v-show则是初始渲染开销大，频繁切换使用 v-show，运行时经常改变则使用 v-if

v-if和 v-for一起使用时， v-for的优先级更高

v-for可遍历数组，第二个参数是索引

v-for可遍历对象，第二个参数是 key，第三个参数是索引

v-for和