vue深入浅出知识

Vue组件

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

v-on 指令侦听
$on 侦听一个事件
$once 一次性侦听一个事件
$off 停止侦听一个事件

慎用递归组件

• 尽量避免组件的循环引用
• 优先使用 template来定义模板，而不是 inline-template
• $forceUpdate来强制更新view
• 组件包含大量静态内容时，可使用 v-once来标记，缓存静态内容

过渡 & 动画

• transition组件控制过渡动画，可以给任何元素和组件添加进入/离开过渡

• 当插入或删除 transition中的元素时，vue会做如下处理

• 自动嗅探元素是否使用了css过渡和动画，适当时机添加/删除类名

• 元素的钩子函数会在适当时机被调用

• 元素既没有钩子函数也没有css动画，插入和删除操作在下一帧立即执行（浏览器逐帧动画机制）

过渡的类名

• v-enter/v-enter-active/v-enter-to
• v-leave/v-leave-active/v-leave-to

css动画用法同css过渡，区别是类名 v-enter不会在DOM插入后立即删除，而是在 animationend事件触发时删除
自定义过渡类名，使用以下属性指定:

• enter-class/enter-active-class/enter-to-class
• leave-class/leave-active-class/leave-to-class
• 自定义类名优先级高于普通的类名

使用 type属性设置 transition或 animation来申明vue使用的动画类型
transition组件上使用 duration来设置动画执行的时间
可以使用钩子函数

• beforeEnter/enter/afterEnter/enterCancelled
• beforeLeave/leave/afterLeave/leaveCancelled

钩子函数使用 v-on指令绑定
钩子和结合过渡和动画使用，也可以单独使用
在 enter/leave中，必须使用 done()来进行回调，否则会同步调用，过渡或动画会立即完成
对于纯使用JavaScript来进行的动画，推荐使用 v-bind:css=“false”来取消css的检测，减少css的影响

可使用 apear设置初始渲染的过渡

• apear/apear-active/apear-to
• beforeApear/apear/afterApear/apearCancelled

多元素过渡，设置唯一 key
过渡模式:

• In-out 新元素先过渡，完成后当前元素过渡离开
• out-in 当前元素先过渡，完成后新元素过渡进入
• 默认行为：进入和离开同时发生
• 多个组件过渡使用动态组件实现
• 列表过渡
• 以真实元素呈现，默认为 ，可使用tag更改呈现标签
• 过渡模式不可用
• 内部需要唯一 key

列表排序过渡，使用的是 FLIP动画，使用类名 v-move来定义class
可复用性 & 组合

• mixins混入属性发生冲突时，以组件数据优先（一层属性深度浅合并）
• mixins混入方法发生冲突时，会将函数合并为一个数组，优先执行混入方法，其次执行组件方法
• Vue.extend策略和 mixins相同

慎用全局混入

• 合并策略可以自定义（参考 vuex的具体实现： Vue.config.optionMergeStrategies）
• 全局自定义指令： Vue.directive()
• 局部自定义指令：属性 directives，类型为 Object

钩子函数

• bind 指令第一次绑定到元素时调用，只执行一次，可用于一次性初始化设置
• inserted 元素插入父节点时调用
• update 所有VNode更新时调用，可能发生在子VNode之前
• componentUpdated 指令所在组件在VNode和其子VNode更新后调用
• unbind 指令与元素解绑时调用

钩子函数都会被传入以下参数：

el 指令绑定元素，可操作DOM
binding 指令描述对象
vnode Vue生成的虚拟节点
oldVnode 上一个 Vnode，仅在 update和 componentUpdated中使用

指令接受所有合法的JavaScript表达式