vue (API 上)

鲸落up
280 阅读3分钟

全局 API

1、Vue.observable( object )

  • 参数：{Object} object

  • 用法： Vue 内部会用它来处理 data 函数返回的对象。 返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新

  • 🍋 使用场景

    可以作为最小化的跨组件状态存储器

    大型项目中的数据状态会比较复杂，一般都会使用 vuex 来管理。但在一些小型项目或状态简单的项目中，为了管理几个状态而引入一个库，显得有些笨重。

    新增的 Vue.observable 可以帮助我们解决这个尴尬的问题，它能让一个对象变成响应式数据：

    // store.js
import Vue from 'vue'

export const state = Vue.observable({ 
  count: 0 
})

    使用：

    <div @click="setCount">{{ count }}</div>

    import {state} from '../store.js'

export default {
  computed: {
    count() {
        return state.count
    }
  },
  methods: {
    setCount() {
        state.count++
    }
  }
}

待继续研究 。。。

参考资料


2、Vue.nextTick( [callback, context] )

  • 参数

    • {Function} [callback]
    • {Object} [context]

  • 用法

    • 官方解说：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

    • 理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数

       // 修改数据
 vm.msg = 'Hello'
   // DOM 还没有更新
 Vue.nextTick(function () {
   // DOM 更新了
 })

  • 🍓 使用场景：

    1. Vue生命周期的created( )钩子函数进行的DOM操作一定要放在Vue.nextTick( )的回调函数中
    1. 当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中； 通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它
    1. 在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。

3、Vue.set( target, propertyName/index, value )

  • 参数

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value

  • 返回值： 设置的值

     let s = this.$set(this.input,'count',0) 
 console.log(s)  // 0

  • 用法

    target： 需要添加数值的目标数据
    propertyName/index： 对象的属性名 / 数组的index索引值
    value： 添加的值 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')


    • 用于对象 data中声明或者赋值过的对象，向对象中添加新的属性，普通的新增会使这个新的属性不是响应式的，所用$set添加
    let s = this.$set(this.input,'count',0) 
this.input // {count: 0}
    • 用于数组 data中声明或者赋值过的数组，向数组中添加新的值或者改变已有的值，普通的方法改此值，是不会更新视图的，所用$set添加

    由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

    1. 当利用索引直接设置数组的某一项时，例如：vm.items[index] = newValue

    2. 当你修改数组的长度时，例如：vm.items.length = newLength，不会更新数组。

    3. 当然vue中给了解决方法，就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice，caoncat等修改数组，同时也将触发状态更新：

    let s = this.$set(this.input,'count',0) 
this.input // {count: 0}

    注意： 对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

  • 使用场景


    📽️ 场景：

    在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

    根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

    当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

    受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。


    🌰 举例： 
    <script>
export default {
  data() {
    return {
  };
  methods: {
    click() {
      this.input.count = 0  // 添加新属性
      this.input.count ++ 
      console.log(this.input,'this.input')
  }
</script>

    image.png

    换成$set添加:

    <script>
export default {
  data() {
    return {
  };
  methods: {
    click() {
      this.$set(this.input,'count',0)  // 添加新属性
      this.input.count ++ 
      console.log(this.input,'this.input')
  }
</script>

    image.png


内置的组件

1、keep-alive

  • Props

    1. include - 字符串或正则表达式。

      只有名称匹配的组件会被缓存：定义缓存白名单，keep-alive会缓存命中的组件；

    2. exclude - 字符串或正则表达式。

      任何名称匹配的组件都不会被缓存：定义缓存黑名单，被命中的组件将不会被缓存；

    3. max - 数字。最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。


  • keep-alive的生命周期

    初次进入时：created > mounted > activated；退出后触发 deactivated

    再次进入：会触发 activated；

    事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中

  • 用法

    有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。

    • <keep-alive> 包裹动态组件时，会 缓存 不活动的组件实例，而不是销毁它们。
    • 和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
    • 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

    ✍ 在动态组件中应用

    <keep-alive :include="whiteList" :exclude="blackList" :max="amount">
   <component :is="currentComponent"></component>
</keep-alive>

    ✍ 在vue-router中应用

    <keep-alive :include="whiteList" :exclude="blackList" :max="amount">
  <router-view></router-view>
</keep-alive>

  • 使用场景


    📽️ 场景：

    1. 用户在某个筛选列表页面筛选出列表数据，切换到其他页面，再回到改列表页，希望的效果：保留之前的筛选结果

    2. 我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处


    🌰 举例（选择性缓存组件）：

    1. 利用include、exclude属性

      include 和 exclude prop 允许组件有条件地缓存。二者都可以用 逗号分隔字符串、正则表达式 或 一个数组 来表示：

      <!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>
      • include属性表示只有name属性为a的组件会被缓存，其它组件不会被缓存 （ 注意：是组件的名字，不是路由的名字 ）
      • exclude属性表示除了name属性为a的组件不会被缓存，其它组件都会被缓存 （ 注意：是组件的名字，不是路由的名字 ）

    2. 利用meta属性

      export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
 ]

      <keep-alive>
    <!--这里是会被缓存的组件-->
   <router-view v-if="this.$route.meat.keepAlive"></router-view>
</keep-alive>

    参考： www.jianshu.com/p/9523bb439…


transition

  • Props：

    • name - string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"
    • appear - boolean，是否在初始渲染时使用过渡。默认为 false。
    • css - boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
    • type - string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
    • mode - string，控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。
    • duration - number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。
    • enter-class - string
    • leave-class - string
    • appear-class - string
    • enter-to-class - string
    • leave-to-class - string
    • appear-to-class - string
    • enter-active-class - string
    • leave-active-class - string
    • appear-active-class - string 待续。。。
avatar
文章
阅读
粉丝