Vue基础知识简介

基础知识：

• 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()全局注册的组件可在其被注册后的任何经过new Vue()建立的实例所使用，包含其组件树中的全部组件
• 经过插槽<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>)/具名插槽(<slot name=“header"></slot>)/做用域插槽(slot/slot-scope)
• <keep-alive>组件可用来缓存被切换后隐藏的组件的状态
• $root访问根实例，$parent访问父组件实例(不推荐)
• 父组件访问子组件，使用$refs属性来获取设置了ref属性的子组件
• 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 当前元素先过渡，完成后新元素过渡进入
  • 默认行为：进入和离开同时发生
• 多个组件过渡使用动态组件实现

• 列表过渡 <transition-group>

  • 以真实元素呈现，默认为<span>，可以使用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表达式

渲染函数 & JSX

• render函数接受createElement方法做为参数
• createElement方法的做用是建立一个虚拟节点(VNode)
• createElement参数比较复杂，参照官网：参数
• 组件树中的VNodes必须惟一
• render中的v-if/v-for可使用if/else和map重写
• 插槽使用this.$slot.default访问，做用域插槽使用this.$scopeSlots.default访问和设置
• 可使用插件babel-plugin-transform-vue-jsx支持JSX语法
• 将h做为createElement的别名是Vue生态的一个惯例，也是JSX要求的
• 函数式组件 关键词：functional
• 函数式组件渲染开销低，但相应的，它不会出如今Vue devtools的组件树里边
• 函数式组件要求你本身实现同名特性的替换与智能合并
• Vue的模板实际编译成了render方法实现的VNode，可使用Vue.compile()方法来输出编译结果

插件

• 插件会为vue提供全局的功能，包括但不限于如下几种：

  • 添加全局的属性或方法，如vue-custom-element
  • 添加全局的资源（指令、过滤器、过渡等），如：vue-touch
  • 经过全局mixins添加一些组件选项，如：vue-router
  • 添加Vue实例方法，经过添加到Vue.prototype上实现
  • 一个独立的库，同时有本身的API，又实现以上部分功能，如：vue-router
• Vue插件有一个公开的方法install，第一个参数是Vue构造器，第二个参数是一个可选对象。
• 插件的使用经过全局方法Vue.use(MyPlugin)使用，只会注册一次插件
• 在CommonJS中，应该始终显式的调用Vue.use方法
• 社区插件列表awesome-vue

过滤器

• {{ msg | filter }}
• <div v-bind=“msg | filter"></div>
• 全局过滤器使用Vue.filter()建立
• 局部过滤器使用对象属性filters建立
• 过滤器函数老是接收表达式的值做为第一个参数，过滤器能够有多个，值依次向后传递
• 过滤器能够接收额外的参数

构建 & 部署

• <script>标签引入[vue.min.js](https://vuejs.org/js/vue.min.js)

• 使用vue-cli

  • webpack + vue-loader
  • browserify + vueify
  • rollup + rollup-plugin-vue
• 利用钩子函数Vue.config.errorHandler定义配置来跟踪运行时错误，能够搭配[Sentry](https://sentry.io/)使用（集成配置）
• 单文件组件（.vue文件）