VUE入门知识，官方文档梳理

子曰：“温故而知新，可以为师矣。”
本人已使用VUE一段时间，官方文档写的非常的详细，本次整理主要是为了温习，加深对各个知识点的熟悉程度，本文不适合做为初学者的入门教程，建议初学者移步官方文档。不过 Vue 本身含有非常丰富的功能，要用 Vue 搭建完整的应用，仍然需要了解大量 Vue 设计概念和操作技巧。

VUE 后台管理系统开发交流Q~群:942802115

官方文档地址

基本指令

v-text 输出渲染后的值
v-html 输出解析HTML元素后的值
v-if 条件判断
v-else-if
v-else
v-for 循环
v-model 表单双向数据绑定
v-show 控制元素显示与隐藏
v-bind 绑定元素的属性和style
v-on 绑定事件
v-pre 原样输出
v-clock 渲染完之后才显示，防止将{{message}}类似的输出到页面
v-once 只渲染一次

生命周期

011.png

beforeCreate
创建前）在数据观测和初始化事件还未开始
created
创建后）完成数据观测，属性和方法的运算，初始化事件，$属性还没有显示出来（载入前）在挂载开始之前被调用，相关的函数首次被调用。实例已完成以下的配置：编译模板，把里面的数据和模板生成。注意此时还没有挂载到页面上。（载入后）在被新创建的el属性还没有显示出来
beforeMount
(载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。此时打印this.$el 输出的是节点
mounted
(载入后）在el 被新创建的vm

el 输出的是节点内挂载的DOM元素
beforeUpdate
（更新前）在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。数据改变,但是还没有渲染的时候
updated
（更新后）在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。页面渲染之后
activated
keep-alive 组件激活时调用。
deactivated
keep-alive 组件停用时调用.
beforeDestroy
(销毁前）在实例销毁之前调用。实例仍然完全可用。
destroyed
销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
errorCaptured

计算属性

计算属性的缓存 vs 方法

在许多情况下,计算属性和方法都能达到同样的效果,我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要依赖条件还没有发生改变，多次访问函数计算属性会立即返回之前的计算结果，而不必再次执行函数。

所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
计算属性默认只显示getter,当你需要的时候也可以提供一个setter
注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
//

vm.fullName = 'jack ma'
<!-- 此时会触发set -->

watch 属性

watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    # 方法名
    b: 'someMethod',
    # 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    # 该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    # watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
}

条件渲染

v-if
v-else // 必须紧跟在带 v-if 或者 v-else-if 的元素的后面
v-if-else // 必须搭配v-if使用并且必须紧跟在带 v-if 或者 v-else-if 的元素之后

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

可以渲染数组,对象,数字,字符串

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

key
和元素复用性能有关，有相同父元素的子元素必须有独特的 key，一般可以用id

显示过滤后的数据

items 可以是computed属性
items 可以是methods方法

数组的更新

修改数组中的数据,但是页面渲染不会响应式的更新可以通过以下三种方式

变异方法

push()
pop()
shift()
unshift()
splice()
sort()
reserve()

改变引用 | 重新赋值 | 替换数组

使用新数组替换旧的数组

set方法 (同样适用于对象的更新)

Vue.set(vm.items, indexOfItem, newValue)
this.$set(vm.items, indexOfItem, newValue)

动态组件

必须使用 <component> 标签
使用is属性决定要渲染的组件

is属性的使用

在一些标签对内部元素有着严格的限制,这个时候我们想要使用组件就需要is属性

// 这里就会把tr属性渲染成对应的组件,直接使用组件不被允许
<table>
  <tr is="blog-post-row"></tr>
</table>

Prop属性传递

传递使用了v-bind 所有传递的值都为动态的,例如

<!-- 传递的为字符串 -->
<blog-post likes="42"></blog-post>
<!-- 传递的为数字 -->
<blog-post v-bind:likes="42"></blog-post>

数字
字符串
布尔值

<!-- 包含该 prop 没有值的情况在内，都意味着 `true`,即使子组件设置了default为false。-->
  <blog-post is-published></blog-post>

对象
数组
! prop 为单向数据流,子组件接收后不能直接修改数据,如果要对数据进行加工,需要先将接收到的数据赋值给data中自定义的参数

prop验证

type 类型检查
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
- 自定义构造函数详见文档
required 是否必填
validator:function() 自定义验证函数

作用域插槽

对于作用于插槽的理解:正常的插槽不论具名插槽还是匿名插槽都不带数据,只是留出一片区域让你自己插入
作用域插槽则是带有数据的,样式父组件说了算，但内容可以显示子组件插槽绑定的。

<!-- 作用域插槽可以输具名插槽,要讲本身的数据或者通过prop接收到的数据传出来 -->
<slot name="up" :data="data"></slot>

<!-- 父组件调用的时候 -->
    <child>
      <template slot-scope="user">  # 这里使用 user接收传过来的data,必须要使用template标签和slot-scope
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
    </child>

依赖注入

个人理解在 $root 和$ parent 都无法很好的访问上级组件的时候使用依赖注入

provide选项允许我们指定我们想要提供给后代组件的数据/方法。在这个例子中，就是

provide: function () {
  return {
    getMap: this.getMap
  }
}

inject 然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性

inject: ['getMap']

循环引用

递归组件

递归组件调用自身的时候只能通过name来调用,不用在自身引入注册
传值的时候最好做下判断如果有值再调用

组件之间的循环引用

组件互相引用,互为父子,形成悖论.只有组件为全局注册组件时才会解开悖论
解决方案
- 等到生命周期钩子 beforeCreate 时去注册它：
- 在本地注册组件的时候，你可以使用 webpack 的异步 import

动画&&过渡

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

过渡的类名

v-enter
只存在第一帧
v-enter-active
第一帧到最后一帧
v-enter-to
第二帧到最后一帧
v-leave
只存在第一帧
v-leave-active
第一帧到最后一帧
v-leave-to
第二帧到最后一帧
v-enter-active,v-leave-active
都是处于整个流程中,故可以用来监视过渡的变化

v-enter 第一帧设置以一个属性,第二帧属性移除一般都是从无到有,第一帧设置无
v-enter-to 因为第一帧已经移除,所以第二帧无需设置
v-enter-active 检测到属性变化,设置过渡动效时间
v-leave 离开的第一帧,不设置
v-leave-to 第二帧设置为改变后的状态,并移除了第一帧,状态改变
v-leave-active 检测到第二帧的变化设置过渡动效时间等

综上, 一般v-enter,v-leave-to写在一起 v-enter-active,v-leave-active写在一起设置相同的效果
对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

过渡顺序

CSS3动画

直接写在 v-*-active中即可

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

自定义过渡类名 && animate.css的使用

transtion 的API文档中有明确的解释
animate.css 是基于@keyfamse的animated动画
自定义名称的钩子函数,通过这些钩子可以自定义对应的class过渡类名

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
通过自定义过渡类名结合animate.css使用
必须使用自定义过渡类名
必须先加 animated 这个类

<transition
    name="custom-classes-transition"
    appear // 允许首次进入加载动画
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
    appear-active-class = "animated tada" // 首次进入加载的过渡效果具体
  >
    <p v-if="show">hello</p>
</transition>

同时使用过渡和动画

对于一些过渡和动画同时使用的情况,可以在自定义过渡类名中加入原始的过渡类名,然后书写对应的效果

<transition
    name="fade"
    type= "animation | transition " // 如果过渡和动画的时间不一致,这里可以指定以谁的为准
    appear
    enter-active-class="animated tada fade-enter-active" // 这里加入了原始的类,可以自定义
    leave-active-class="animated bounceOutRight"
    appear-active-class = "animated tada"
>

但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
你也可以自定义效果执行时长

<transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

多个组件的过渡

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

过渡模式

在多个元素或组件切换过度的时候，可以设置mode 模式来控制显隐顺序

out-in 先隐藏后进入
in-out 先进入后隐藏

动态组件的过渡

通过is属性控制组件

列表的过渡

使用 <transition-group> 标签
内部元素总是需要提供唯一的 key 属性值。
不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素
其他和原来一样

列表的排序过渡

实现添加删除等过程中列表的平滑过渡
v-move 属性来实现 *-move

列表的交错过渡

通过 data 属性与 JavaScript 通信，就可以实现列表的交错过渡,文档讲的很清楚

可复用过渡

就是封装一个过渡组件结合slot

动态过渡

通过数据驱动的方式设置过渡效果,具体看文档

状态过渡

这部分比较复杂,主要还是数据驱动的思想.通过数据的改变影响

混入

我对混入的理解是,你定义一个一个对象,可以写vue中的数据,方法,以及生命周期等,在对应的组件如果引入了.那么这个对象中定义的就混合为同一个对象。两个对象键名冲突时，取组件对象的键值对.因为混入对象的钩- 子将在组件自身钩子之前调用。
全局混入要慎用,因为他会影响所有实例
关于自定义合并策略,抱歉没搞懂 - -

extend

主要用途是组件的继承和多态,可以将一个组件扩展为Vue的一个子类

const compont = {}

const ComVue = Vue.extend(compont)

new ComVue({
    el:"#root",
    ....
})

可以一个组件继承另一个组件类似minxins

const Comp2 = {
    extend: compont,
    .....
}

自定义指令

因为这个文档已经写的很清楚了,所以这里写一下我的理解.当内置指令例如 v-if 等无法满足我们需求的时候,我们可以自定义一些指令以帮助我们实现需求. 具体实现方法看文档.

// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

渲染函数 && JSX

参考react就很好理解了

render (createElement) {
    return createment (
        'com-one',{
            ref: 'com'
        },[
            createElement('span',{
                ref: 'span'
            },this.value)
        ]
    )
}

插件

插件是一个经常用到的地方.主要是一些全局功能

使用Vue.use()方法使用插件
插件的开发

# wxpay
export const wxpay = {
    install:() => {
        Vue.prototype.$wxpay = () => {
            # xxxx
        }
    }
}

# toast.js
var Toast = {};
Toast.install = function (Vue, options) {
    Vue.prototype.$msg = 'Hello World';
}
module.exports = Toast;