vue文档阅读整理

2018-09-29  本文已影响0人  情有千千节

vue文档以及api阅读整理

更新时间2019-12-20

虽然vue3.0马上要发布了, 但是我认为许多核心api还是不会变的,趁着最近有空,再次精读文档,每次阅读都有很大的收获.
此次精读主要分析整理一些个人比较薄弱的功能模块
加上自己日常使用的一些心得, 以更加通俗的语言描述出来
对于基础性的东西文档中都讲的很清楚

官方文档地址

基本指令

生命周期

生命周期详解

黄雪峰整理的生命周期示意图

计算属性

计算属性的缓存 vs 方法

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

计算属性和方法对比, 计算属性有缓存, 依赖不变不更新, 而方法每次都要执行
计算属性和watch对比, 可以简单理解 计算属性为多个参数影响一个, watch是一个变化,可以去操作多个

计算属性的 setter

  1. 所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
  2. 计算属性默认只显示getter,当你需要的时候也可以提供一个setter
  3. 注意如果你为一个计算属性使用了箭头函数，则 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-if两个代码块有相同元素的时候,很可能,会被复用,解决办法:只需添加一个具有唯一值的 key 属性即可

v-if vs v-show

列表渲染

<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>

显示过滤后的数据

数组的更新

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

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

对象的属性的添加删除

Vue 不能检测对象属性的添加或删除
使用set方法添加响应式属性

动态组件

异步组件

<!-- 处理加载状态 -->
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

is属性的使用

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

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

组件的v-model

model: {
    prop: 'checked',
    event: 'change'
},
props: {
    checked: Boolean
},

.sync修饰符

<!-- 简化了双向绑定的写法,  -->

子组件
this.$emit('update:title', newTitle)

父组件
<text-document v-bind:title.sync="doc.title"></text-document>

Prop

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

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

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

prop验证

作用域插槽 2.6 更新

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

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

<!-- 父组件调用的时候 -->
v-solt 可以用 # 替换

#data="{userdata}"
    <child>
      <template v-solt:data="userdata">  # 这里使用 user接收传过来的data,必须要使用template标签和slot-scope
        <div class="tmpl">
          <span v-for="item in userdata">{{item}}</span>
        </div>
      </template>
    </child>

依赖注入

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

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

inject: ['getMap']

循环引用

递归组件

组件之间的循环引用

动画&&过渡

参考去哪儿 5-123

过渡的类名

  1. v-enter 第一帧设置以一个属性,第二帧属性移除 一般都是从无到有,第一帧设置无
  2. v-enter-to 因为第一帧已经移除,所以第二帧无需设置
  3. v-enter-active 检测到属性变化,设置过渡动效时间

  1. v-leave 离开的第一帧,不设置

  2. v-leave-to 第二帧设置为改变后的状态,并移除了第一帧,状态改变

  3. 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。

过渡顺序 enter.png leave.png

CSS3动画

.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文档中有明确的解释
transition API

animate.css 是 基于@keyfamse的animated动画
自定义名称的钩子函数,通过这些钩子可以自定义对应的class过渡类名

通过自定义过渡类名结合animate.css使用

<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"
>
  1. 但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
  2. 你也可以自定义效果执行时长 
    <transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

JS动画钩子 &&　Velocity.js

文档讲的很详细了
JS动画钩子

多个组件的过渡

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

过渡模式

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

动态组件的过渡

列表的过渡

列表的排序过渡

列表的交错过渡

可复用过渡

动态过渡

状态过渡

混入

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

extend

主要用途是组件的继承和多态

可以将一个组件扩展为Vue的一个子类

const compont = {}

const ComVue = Vue.extend(compont)

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

可以一个组件继承另一个组件

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

自定义指令

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

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

渲染函数 && JSX

参考react就很好理解了, vue3.0开放了渲染函数

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

插件

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

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

# 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;

keep-alive

主要用于组件以及路由的缓存, 用于保留组件状态或避免重新渲染

  1. 参数
    • include
    • exclude
    • max
  2. 生命周期
    • activated
    • deactivated
上一篇下一篇

猜你喜欢

热点阅读