Mari kita bincangkan tentang pemahaman komponen terbina dalam Vue kekal hidup

Apa itu Keep-alive? Artikel berikut akan membincangkan pemahaman anda tentang vue komponen terbina dalam keep-alive. Saya harap ia akan membantu anda!

1 Apakah itu Keep-alive? bertukar antara komponen Simpan keadaan dalam ingatan semasa proses untuk mengelakkan pemaparan berulang . [Cadangan berkaitan:

tutorial video vuejs

, keep-alivepembangunan bahagian hadapan webvue]DOM Apabila membungkus komponen dinamik, tika komponen tidak aktif akan dicache dan bukannya memusnahkannya .

boleh menetapkan atribut

berikut: keep-alive

keep-alive - rentetan atau ungkapan biasa. Hanya komponen dengan nama yang sepadan akan dicache props

- rentetan atau ungkapan biasa. Mana-mana komponen dengan nama yang sepadan tidak akan dicache
• include
- Nombor. Bilangan maksimum kejadian komponen yang boleh dicache
• exclude
Penggunaan asas
• : max

Menggunakan

dan keep-alive:

<keep-alive>
  <component :is="view"></component>
</keep-alive>

Padanan terlebih dahulu menyemak pilihan includes bagi komponen itu sendiri Jika pilihan exclude tidak tersedia, ia sepadan dengan nama pendaftaran setempatnya (nilai utama komponen

komponen induk tidak boleh dipadankan dengan tetapan

<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="[&#39;a&#39;, &#39;b&#39;]">
  <component :is="view"></component>
</keep-alive>

Komponen dengan cache keep-alive akan mempunyai dua lagi cangkuk kitaran hayat (name dan name): components

Apabila memasukkan komponen untuk yang pertama. masa: activated > deactivated> memasuki komponen semula:

>

> ... ... > pergi daripada
• –>beforeRouteEnter–>beforeCreate –>created, pada masa ini halaman senarai mestilah mountedactivatedbeforeRouteLeave daripada deactivated–>
–>
• –>beforeRouteEnter–>activated–>beforeRouteLeave, pada masa ini, anda boleh mengawal deactivated

halaman mengikut keperluan . Tetapkan atribut

dalam penghalaan untuk menentukan sama ada caching diperlukan

Gunakan

keepalive

3 🎜>

首页 ialah komponen terbina dalam 列表页商详页再返回 Lokasi kod sumber: src/core /components/keep-alive.jskeep-alive

Anda boleh melihatnya komponen tidak mempunyai 首页, tetapi menggunakan 列表页 Apabila komponen dipaparkan, fungsi 商详页 akan dilaksanakan secara automatik 返回到列表页(需要缓存)返回到首页(需要缓存) ialah objek yang digunakan untuk menyimpan komponen yang perlu dicache. Ia akan disimpan dalam bentuk berikut: 再次进入列表页(不需要缓存)keep-alive

Fungsi

dilaksanakan apabila komponen dimusnahkan keepAlive

{
  path: 'list',
  name: 'itemList', // 列表页
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '列表页'
 }
}

Perhatikan perubahan

dan <keep-alive> dalam fungsi cangkuk

, seperti berikut:

<div id="app" class=&#39;wrapper&#39;>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

Jika atau

berubah, ini bermakna definisi perlu dicache Jika peraturan komponen atau peraturan komponen yang tidak perlu dicache telah berubah, kemudian laksanakan fungsi

, iaitu seperti berikut: keep-alivevue

Lintas objek

dalam fungsi ini dan keluarkan setiap Nilai

item digunakan untuk memadankan peraturan caching baharu Jika ia tidak sepadan, ini bermakna komponen tidak perlu lagi dicache di bawah peraturan caching baharu dan fungsi

export default {
  name: 'keep-alive',
  abstract: true,

  props: {
    include: [String, RegExp, Array],
    exclude: [String, RegExp, Array],
    max: [String, Number]
  },

  created () {
    this.cache = Object.create(null)
    this.keys = []
  },

  destroyed () {
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },

  mounted () {
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },

  render() {
    /* 获取默认插槽中的第一个组件节点 */
    const slot = this.$slots.default
    const vnode = getFirstComponentChild(slot)
    /* 获取该组件节点的componentOptions */
    const componentOptions = vnode && vnode.componentOptions

    if (componentOptions) {
      /* 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag */
      const name = getComponentName(componentOptions)

      const { include, exclude } = this
      /* 如果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode */
      if (
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }

      const { cache, keys } = this
      /* 获取组件的key值 */
      const key = vnode.key == null
        // same constructor may get registered as different local components
        // so cid alone is not enough (#3269)
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key
     /*  拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存 */
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        keys.push(key)
      }
        /* 如果没有命中缓存，则将其设置进缓存 */
        else {
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        /* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }

      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}

dipanggil untuk mengalih keluar. ia daripada

Hanya alih keluar objek templaterenderFungsi caching paling berkuasa tentang render ialah melaksanakannya dalam fungsi

Mula-mula dapatkan nilai

komponen: this.cache

this.cache = {
    'key1':'组件1',
    'key2':'组件2',
    // ...
}

Selepas mendapat nilai

, pergi ke objek pruneCacheEntry untuk mencari sama ada terdapat nilai ini, bermakna komponen itu mempunyai cache, iaitu, ia mencecah cache, seperti berikut:

/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */
    remove(keys, key)
    keys.push(key)
}

直接从缓存中拿 vnode 的组件实例，此时重新调整该组件key的顺序，将其从原来的地方删掉并重新放在this.keys中最后一个

this.cache对象中没有该key值的情况，如下：

/* 如果没有命中缓存，则将其设置进缓存 */
else {
    cache[key] = vnode
    keys.push(key)
    /* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
    if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}

表明该组件还没有被缓存过，则以该组件的key为键，组件vnode为值，将其存入this.cache中，并且把key存入this.keys中

此时再判断this.keys中缓存组件的数量是否超过了设置的最大缓存数量值this.max，如果超过了，则把第一个缓存组件删掉

四、思考题：缓存后如何获取数据

解决方案可以有以下两种：

• beforeRouteEnter
• actived

beforeRouteEnter

每次组件渲染的时候，都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次进入路由执行
        vm.getData()  // 获取数据
    })
},

actived

在keep-alive缓存的组件被激活的时候，都会执行actived钩子

activated(){
   this.getData() // 获取数据
},

注意：服务器端渲染期间avtived不被调用

（学习视频分享：vuejs入门教程、编程基础视频）

Atas ialah kandungan terperinci Mari kita bincangkan tentang pemahaman komponen terbina dalam Vue kekal hidup. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!