Bagaimana untuk mengelakkan penyegaran halaman apabila tab menu bertukar dalam Vue

Dalam pembangunan bahagian hadapan, selalunya perlu untuk melaksanakan fungsi penukaran tab pada bar menu. Dengan populariti aplikasi satu halaman, semakin banyak halaman web dibangunkan menggunakan rangka kerja Vue Rangka kerja Vue menyediakan perpustakaan komponen yang kaya dan kaedah pengikatan pantas untuk membantu pembangun melaksanakan banyak fungsi dengan mudah. Antaranya, komponen penukaran tab Vue telah digunakan secara meluas dalam pembangunan.

Walau bagaimanapun, apabila melaksanakan fungsi penukaran tab pada bar menu, masalah sering dihadapi: setiap kali tab ditukar, halaman akan dimuatkan semula, menyebabkan operasi pengguna terganggu. Jadi, bagaimana untuk mengelakkan penyegaran halaman semasa menukar tab menu dalam Vue? Artikel ini akan memperkenalkan penyelesaian yang mungkin.

1. Analisis Masalah

Dalam rangka kerja Vue, kaedah penukaran tab biasa boleh direalisasikan melalui kelas mengikat secara dinamik v-bind. Sebagai contoh, kami ingin melaksanakan bar menu ringkas dengan tiga suis tab dan kandungan halaman akan berubah apabila tab bertukar. Pada masa ini, kita boleh menulis seperti ini:

    <div id="app">
        <ul>
            <li v-for="(item, index) in items" :class="{ active: index === activeIndex }" @click="handleClick(index)">{{ item }}</li>
        </ul>
        <div>{{ content }}</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                activeIndex: 0,
                content: '',
                items: ['Tab1', 'Tab2', 'Tab3']
            },
            methods: {
                handleClick(index) {
                    this.activeIndex = index
                    this.fetchContent()
                },
                fetchContent() {
                    // 模拟异步请求
                    setTimeout(() => {
                        this.content = `Tab${this.activeIndex + 1} content`
                    }, 1000)
                }
            }
        })
    </script>

Dalam kod ini, kami menggunakan arahan v-bind untuk mengikat atribut kelas tag li secara dinamik. Antaranya, activeIndex digunakan untuk menandakan tab yang sedang dipilih dan kaedah fetchContent digunakan untuk mendapatkan kandungan di bawah tab yang sepadan. Apabila pengguna mengklik tab, kaedah handleClick akan mengemas kini ActiveIndex dan mencetuskan kaedah fetchContent untuk mendapatkan kandungan di bawah tab yang sepadan.

Kod sedemikian mempunyai fungsi dan kebolehgunaan tertentu, tetapi kandungan akan diambil semula setiap kali tab diklik, yang mungkin menyebabkan penurunan dalam pengalaman pengguna. Untuk mengelakkan masalah ini, kita perlu menggunakan komponen keep-alive yang disediakan dalam Vue untuk cache kandungan dan mengelakkan pemerolehan berulang.

2. Peranan komponen keep-alive

Vue menyediakan komponen keep-alive, yang boleh mencapai tujuan caching komponen. Apabila menggunakan komponen keep-alive, jika komponen dibalut dengan komponen keep-alive, maka apabila komponen itu dimusnahkan, keadaannya akan dikekalkan sehingga kali berikutnya ia dipaparkan. Dalam erti kata lain, komponen tidak akan dicipta semula, dan dom tidak akan dipasang semula.

Komponen keep-alive mempunyai dua cangkuk kitaran hayat khas: diaktifkan dan dinyahaktifkan. Apabila komponen dalam cache komponen keep-alive dalam halaman diaktifkan (iaitu komponen aktif dalam cache dan digunakan semula), fungsi cangkuk yang diaktifkan akan dipanggil. Begitu juga, apabila komponen cache dinyahdayakan (iaitu dalam keadaan tidak aktif), fungsi cangkuk yang dinyahaktifkan akan dipanggil.

Dalam senario penukaran tab menu, kita boleh menggunakan komponen keep-alive pada komponen yang perlu dicache dan mengaktifkan cache melalui atribut khas "keep-alive". Kod tersebut adalah seperti berikut:

    <div id="app">
        <ul>
            <li v-for="(item, index) in items" :class="{ active: index === activeIndex }" @click="handleClick(index)">{{ item }}</li>
        </ul>
        <keep-alive>
            <div v-if="showContent">{{ content }}</div>
        </keep-alive>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                activeIndex: 0,
                content: '',
                items: ['Tab1', 'Tab2', 'Tab3'],
                showContent: false
            },
            methods: {
                handleClick(index) {
                    this.activeIndex = index
                    this.showContent = true
                    this.fetchContent()
                },
                fetchContent() {
                    // 模拟异步请求
                    setTimeout(() => {
                        this.content = `Tab${this.activeIndex + 1} content`
                    }, 1000)
                }
            },
            watch: {
                activeIndex() {
                    this.showContent = false
                }
            }
        })
    </script>

Kami menambah komponen keep-alive pada kod dan membalut komponen yang perlu dikekalkan di dalamnya. Dalam kaedah fetchContent, sebelum setiap kemas kini kandungan, kita perlu menetapkan atribut showContent kepada benar untuk mencetuskan caching. Apabila atribut activeIndex berubah, kita perlu menetapkan showContent kepada palsu untuk mengelakkan ralat tidak dijangka yang disebabkan oleh cache yang tergantung.

Dengan cara ini, apabila pengguna menukar tab, jika kandungan tab telah dicache, halaman itu tidak akan dimuat semula dan pengalaman pengguna dijamin.

3. Pengoptimuman

Dengan menganalisis dan mengoptimumkan kod, kami boleh mencapai pengalaman pengguna yang lebih baik dan kebolehbacaan kod.

Pertama sekali, apabila terdapat banyak item menu, kita boleh mengelak daripada menulis banyak kod dengan menjana komponen secara dinamik. Kita boleh memodelkan item melalui atribut yang dikira, dan kemudian merujuk atribut ini dalam paparan untuk mencapai kesan menjana item menu secara automatik. Contohnya:

  <div id="app">
      <ul>
          <li v-for="(item, index) in tabList" :class="{active: index === activeIndex}" @click="handleTabClick(index)">{{item}}</li>
      </ul>
      <keep-alive>
          <component :is="contentComponent"></component>
      </keep-alive>
  </div>
  <script>
      new Vue({
          el: '#app',
         data: {
              activeIndex: 0,
              tabList: ['武汉', '北京', '上海'],
              contentMap: {
                  武汉: {template: '<div>武汉是我的家乡</div>'},
                  北京: {template: '<div>北京欢迎您</div>'},
                  上海: {template: '<div>上海滩最美</div>'}
              }
          },
          computed: {
              contentComponent() {
                  return this.contentMap[this.tabList[this.activeIndex]]
              }
          },
          methods: {
              handleTabClick(index) {
                  this.activeIndex = index
              }
          }
      })
  </script>

Melalui objek contentMap, kami boleh memodelkan kandungan yang sepadan dengan setiap tab. Dalam atribut yang dikira, kami menggunakan borang a[b] untuk mendapatkan komponen yang sepadan. Dalam kaedah handleTabClick, mengemas kini nilai activeIndex mencetuskan cache komponen.

Seterusnya, kita boleh mengoptimumkan kesan cache. Selepas komponen dicache, komponen membaca data daripada memori dan menggunakan semula DOM yang dijana sebelum ini. Walau bagaimanapun, komponen cache tidak menerima sebarang perubahan keadaan, termasuk prop dan acara, sehingga komponen itu musnah sepenuhnya. Jika kita perlu mengubah suai beberapa keadaan dalam komponen cache, kita boleh menggunakan fungsi cangkuk yang diaktifkan dan dinyahaktifkan. Pada masa yang sama, untuk mengelakkan data dalam kotak input daripada ditetapkan semula, kita perlu menggunakan arahan model-v untuk mengikat data kepada komponen yang sebenarnya memproses data dan bukannya komponen cache. Contohnya:

  <div id="app">
      <ul>
          <li v-for="(item, index) in tabList" :class="{active: index === activeIndex}" @click="handleTabClick(index)">{{item}}</li>
      </ul>
      <keep-alive>
          <component :is="contentComponent" v-model="dataValid"></component>
      </keep-alive>
  </div>
  <script>
      const WUHAN_CONTENT = {
          template: `
              <div>
                  <input v-model="data">
                  <button @click="checkData">检查数据</button>
                  <p>{{tip}}</p>
              </div>
          `,
          data() {
              return {
                  data: '',
                  tip: ''
              }
          },
          watch: {
              data() {
                  this.tip = ''
              }
          },
          methods: {
              checkData() {
                  this.tip = this.dataValid(this.data) ? '数据有效' : '数据无效'
              }
          },
      }
      const BEIJING_CONTENT = {template: '<div>北京欢迎您</div>'}
      const SHANGHAI_CONTENT = {template: '<div>上海滩最美</div>'}

      new Vue({
          el: '#app',
          data: {
              activeIndex: 0,
              tabList: ['武汉', '北京', '上海'],
              contentMap: {
                  武汉: WUHAN_CONTENT,
                  北京: BEIJING_CONTENT,
                  上海: SHANGHAI_CONTENT
              },
              dataValid(value) {
                  return value.trim().length > 0
              }
          },
          computed: {
              contentComponent() {
                  return this.contentMap[this.tabList[this.activeIndex]]
              }
          },
          methods: {
              handleTabClick(index) {
                  this.activeIndex = index
              }
          }
      })
   </script>

Dalam contoh ini, kami menyediakan data validasi fungsi dataValid untuk menyemak data kotak input dataValid hanya boleh dipanggil dalam komponen induk, iaitu arahan model-v Memerlukan. Pada masa yang sama, dalam komponen WUHAN_CONTENT, kami menggunakan kaedah jam tangan untuk memantau perubahan data dalam kotak input, dan mencapai kesan semakan data masa nyata dengan mengemas kini petua. Selepas pengoptimuman ini, fungsi penukaran tab menu kami boleh dipaparkan dengan sempurna pada halaman.

4. Ringkasan

Artikel ini memperkenalkan cara untuk mengelakkan masalah muat semula apabila melaksanakan fungsi penukaran tab menu dalam rangka kerja Vue, dan melaksanakan caching kandungan halaman melalui aplikasi komponen keep-alive. Pada masa yang sama, kami telah mengoptimumkan program dan meningkatkan kecekapan serta pengalaman penggunanya.

Dalam pembangunan Vue, penukaran tab ialah fungsi biasa Semasa proses pelaksanaan, sebagai tambahan kepada kaedah yang diperkenalkan dalam artikel ini, terdapat banyak kaedah pelaksanaan lain, seperti elemen-ui dan iview, perpustakaan komponen kedua-dua. Rangka kerja UI. API dan komponen Berkaitan Vue juga disediakan dalam -router Setiap kaedah mempunyai ciri, kelebihan dan kekurangannya sendiri. Dalam pembangunan sebenar, kita perlu memilih kaedah yang paling sesuai untuk melaksanakan fungsi penukaran tab menu berdasarkan keperluan sebenar dan persekitaran pembangunan.

Atas ialah kandungan terperinci Bagaimana untuk mengelakkan penyegaran halaman apabila tab menu bertukar dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!