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. 插槽( )/具名插槽( )/作用域插槽(
    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表达式
vue深入浅出知识_第1张图片

你可能感兴趣的:(vue,知识点)