Mari kita bincangkan tentang pemahaman komponen terbina dalam Vue kekal hidup-View.js-php.cn

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

Mari kita bincangkan tentang pemahaman komponen terbina dalam Vue kekal hidup

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

include
exclude
: max

Menggunakan

dan keep-alive:

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

Salin selepas log masuk

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>

Salin selepas log masuk

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:

–>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: &#39;list&#39;,
  name: &#39;itemList&#39;, // 列表页
  component (resolve) {
    require([&#39;@/pages/item/list&#39;], resolve)
 },
 meta: {
  keepAlive: true,
  title: &#39;列表页&#39;
 }
}

Salin selepas log masuk

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>

Salin selepas log masuk

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: &#39;keep-alive&#39;,
  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(&#39;include&#39;, val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch(&#39;exclude&#39;, 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}` : &#39;&#39;)
        : 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])
  }
}

Salin selepas log masuk

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 = {
    &#39;key1&#39;:&#39;组件1&#39;,
    &#39;key2&#39;:&#39;组件2&#39;,
    // ...
}

Salin selepas log masuk

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

Salin selepas log masuk

直接从缓存中拿 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)
    }
}

Salin selepas log masuk

表明该组件还没有被缓存过，则以该组件的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()  // 获取数据
    })
},

Salin selepas log masuk

actived

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

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

Salin selepas log masuk

注意：服务器端渲染期间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!