Vue 超快速学习

（点击上方公众号，可快速关注）

作者：默凡

segmentfault.com/a/1190000015740490

我之前一直使用的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: ‘<li>{{ p1 }}</li>'})
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可以使用多重值的形式： <div:style=“display:[‘-webkit-box’,’-ms-flexbox’,‘flex']"></div>
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和 <template>搭配可减少渲染次数
v-for和自定义组件使用时，需要使用 props来传递值
尽可能的为遍历子元素加上 key，获得渲染优化
数组变异方法： push/pop/unshift/shift/splice/sort/reverse改变原始数组
数组非变异方法： filter/concat/slice 不改变原始数组，总是返回新数组
Vue不能检测到数组索引赋值（使用 vm.$set解决）和修改 length长度赋值(使用 splice解决)的情况
Vue不能检测对象属性的添加和删除(使用 vm.$set或 Object.assign)
is=“todo-item”这种属性的写法比较适合DOM模板
事件修饰符，它们可串联使用： .stop、 .prevent、 .capture、 .self、 .once、 .passive(尤其适合移动端)
.passive不用同时和 .prevent使用，后者会被忽略
按键修饰符: .enter、 .tab、 .delete、 .esc、 .space、 .up、 .down、 .left、 .right
系统按键修饰符: .ctrl、 .alt、 .shift、 .meta(⌘|⊞|◆)、 .exact(允许精确控制系统修饰符组合键触发)
鼠标修饰符： .left、 .right、 .middle
v-model会忽略表单元素的 value、 checked、 selected，仅仅使用实例中的数据作为数据源
表单事件修饰符： .lazy、 .number、 .trim
组件是可复用的vue实例，具有vue实例大多数属性和方法
组件可复用，每个组件有独立的空间
组件上的data必须是一个函数，这样做避免影响了其他组件
通过 Vue.component()全局注册的组件可在其被注册后的任何通过 newVue()创建的实例所使用，包含其组件树中的所有组件
通过插槽 <slot>分发内容(其实就是类似于react的children)
动态组件 <component>配合属性 is来实现
解析DOM模板时需要注意下可能会有不生效的情况，需要使用is来传递组件

Vue组件

全局注册/局部注册
局部注册组件在子组件中不可用
全局注册的行为必须在根Vue实例创建之前发生
camelCase的属性可以在组件中使用 kebab-case
可以以对象的模式指定每一个 props属性的类型
父级 props的更新会向下流动，反之则不行
由于JavaScript对象和数组是引用传入的，所以当子组件对props的改变将会影响到父组件
props类型校验可以是原生构造对象的中的任意一个，也可以自定义检验类型，通过 instanceof检查
对于绝大多数特性来说，外部传入的值会替换掉组件内部设置好的值，如input的type属性，但有的属性则是会进行合并，如class
inhertAttrs:false设置不希望根元素继承特性，可以使用 $attrs属性来设置继承的目标元素
v-on在设置事件监听器时，会把事件名全部转换成小写，推荐始终使用 kebab-case的事件名
v-model可以使用自定义组件中的 model属性自定义
父组件模板的所有东西都会在父级作用域内编译，子组件的所有内容都会在子组件作用域内编译
插槽( <slot></slot>)/具名插槽( <slotname=“header"></slot>)/作用域插槽( slot/slot-scope)
<keep-alive>组件可用来缓存被切换后隐藏的组件的状态
$root访问根实例， $parent访问父组件实例(不推荐)
父组件访问子组件，使用 $refs属性来获取设置了 ref属性的子组件
provide属性允许我们指定要分享给后代组件使用的方法，然后后代组件使用 inject属性来获得祖先组件分享的方法(依赖注入)
事件侦听器（ $emit派发的事件）