Mengendalikan kes tepi


Halaman ini menganggap anda telah membaca Asas Komponen. Jika anda masih belum tahu banyak tentang komponen, saya syorkan anda membacanya terlebih dahulu.

Fungsi yang direkodkan di sini semuanya berkaitan dengan pengendalian kes tepi, iaitu beberapa kes khas yang memerlukan beberapa pelarasan kecil kepada peraturan Vue. Walau bagaimanapun, sila ambil perhatian bahawa semua fungsi ini mempunyai kelemahan atau senario berbahaya. Kami akan perhatikan ini dalam setiap kes, jadi sila beri perhatian apabila anda menggunakan setiap fungsi. . contoh komponen induk


Akses tika komponen anak atau Anak elemen

  • Suntikan ketergantungan

    definisi templat

  • templat sebaris

  • X-Template

      • kemas kini

      • Paksa kemas kini

  • Cipta komponen statik overhed rendah melalui v-sekali

    • Akses elemen & komponen

  • Dalam kebanyakan kes lain yang lebih baik, kami tidak menghubungi komponen secara manual. memanipulasi elemen DOM. Tetapi sudah tentu ada situasi di mana melakukan perkara ini adalah sesuai.

    • Akses tika akar

    • dalam setiap atribut

      . Contohnya, dalam contoh akar ini: 

      // Vue 根实例
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})
      Semua komponen kanak-kanak boleh mengakses atau menggunakan tika ini sebagai kedai global. 

      // 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar

// 调用根组件的方法
this.$root.baz()

      Ini sesuai untuk tunjuk cara atau aplikasi yang sangat kecil dengan bilangan komponen yang kecil. Walau bagaimanapun, model ini tidak meluas kepada aplikasi sederhana dan besar. Oleh itu, dalam kebanyakan kes, kami amat mengesyorkan menggunakan Vuex untuk mengurus keadaan aplikasi.


      Akses contoh komponen induk

      $root 类似，$parent 属性可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。

      在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候，很难找出那个变更是从哪里发起的。

      另外在一些可能适当的时候，你需要特别地共享一些组件库。举个例子，在和 JavaScript API 进行交互而不渲染 HTML 的抽象组件内，诸如这些假设性的 Google 地图组件一样：

      <google-map>
  <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
</google-map>

      这个 <google-map> 组件可以定义一个 map 属性，所有的子组件都需要访问它。在这种情况下 <google-map-markers> 可能想要通过类似 this.$parent.getMap 的方式访问那个地图，以便为其添加一组标记。你可以在这里查阅这种模式。

      请留意，尽管如此，通过这种模式构建出来的那个组件的内部仍然是容易出现问题的。比如，设想一下我们添加一个新的 <google-map-region> 组件，当 <google-map-markers> 在其内部出现的时候，只会渲染那个区域内的标记：

      <google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

      那么在 <google-map-markers> 内部你可能发现自己需要一些类似这样的 hack：

      var map = this.$parent.map || this.$parent.$parent.map

      很快它就会失控。这也是我们针对需要向任意更深层级的组件提供上下文信息时推荐依赖注入的原因。


      访问子组件实例或子元素

      尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 特性为这个子组件赋予一个 ID 引用。例如：

      <base-input ref="usernameInput"></base-input>

      现在在你已经定义了这个 refSerupa dengan $root, atribut $parent boleh digunakan untuk mengakses komponen induk daripada anak komponen Contoh. Ia memberi peluang untuk mencapai komponen induk pada bila-bila masa kemudian, dan bukannya menghantar data ke dalam komponen anak dalam bentuk prop.

      🎜🎜Dalam kebanyakan kes, mencapai komponen induk akan menjadikan aplikasi anda lebih sukar untuk nyahpepijat dan difahami, terutamanya apabila anda menukar data komponen induk. Apabila kita melihat kembali komponen itu kemudian, sukar untuk mengetahui dari mana perubahan itu berasal. 🎜🎜🎜Selain itu, apabila ia mungkin sesuai, anda perlu berkongsi secara khusus beberapa perpustakaan komponen. Contohnya, dalam komponen abstrak yang berinteraksi dengan API JavaScript tanpa memaparkan HTML, seperti komponen Peta Google hipotesis ini: 🎜
      this.$refs.usernameInput
      🎜Komponen <google-map> boleh mentakrifkan peta atribut, semua komponen kanak-kanak perlu mengaksesnya. Dalam kes ini <google-map-markers> mungkin mahu mengakses peta itu melalui sesuatu seperti this.$parent.getMap untuk menambah set tanda. Anda boleh menyemak corak ini di sini 🎜. 🎜🎜Sila ambil perhatian bahawa, walaupun ini, dalaman komponen yang dibina melalui corak ini masih terdedah kepada masalah. Sebagai contoh, bayangkan bahawa kami menambah komponen <google-map-region> baharu dan apabila <google-map-markers> muncul di dalamnya, hanya akan dipaparkan penanda dalam kawasan itu: 🎜
      <input ref="input">
      🎜 Kemudian di dalam <google-map-markers> anda mungkin mendapati diri anda memerlukan beberapa penggodaman seperti ini: 🎜
      methods: {
  // 用来从父级组件聚焦输入框
  focus: function () {
    this.$refs.input.focus()
  }
}
      🎜 Ia boleh hilang kawalan dengan cepat. Inilah sebabnya kami mengesyorkan       suntikan ketergantungan🎜 apabila anda perlu memberikan maklumat kontekstual kepada mana-mana komponen yang lebih mendalam. sebab. 🎜🎜🎜🎜

      🎜🎜Mengakses kejadian atau subelemen subkomponen🎜🎜🎜🎜Walaupun terdapat prop dan acara, kadangkala anda mungkin masih perlu mengakses subkomponen secara langsung dalam JavaScript. Untuk mencapai matlamat ini, anda boleh menetapkan rujukan ID kepada komponen anak melalui atribut ref. Contohnya: 🎜

      this.$refs.usernameInput.focus()
      🎜Kini dalam komponen yang anda telah mentakrifkan ref ini, anda boleh menggunakan: 🎜
      <google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

      untuk mengakses contoh <base-input> ini untuk kecemasan. Sebagai contoh, memfokuskan kotak input secara pemrograman daripada komponen induk. Dalam contoh sebentar tadi, komponen <base-input> juga boleh menggunakan ref yang serupa untuk memberikan akses kepada elemen yang ditentukan di dalam, contohnya: <base-input> 实例，以便不时之需。比如程序化地从一个父级组件聚焦这个输入框。在刚才那个例子中，该 <base-input> 组件也可以使用一个类似的 ref 提供对内部这个指定元素的访问，例如：

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

      甚至可以通过其父级组件定义方法：

      inject: ['getMap']

      这样就允许父级组件通过下面的代码聚焦 <base-input> 里的输入框：

      // 一次性将这个日期选择器附加到一个输入框上
// 它会被挂载到 DOM 上。
mounted: function () {
  // Pikaday 是一个第三方日期选择器的库
  this.picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })
},
// 在组件被销毁之前，
// 也销毁这个日期选择器。
beforeDestroy: function () {
  this.picker.destroy()
}

      当 ref 和 v-for 一起使用的时候，你得到的引用将会是一个包含了对应数据源的这些子组件的数组。

      $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。


      依赖注入

      在此之前，在我们描述访问父级组件实例的时候，展示过一个类似这样的例子：

      mounted: function () {
  var picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })
  this.$once('hook:beforeDestroy', function () {
    picker.destroy()
  })
}

      在这个组件里，所有 <google-map> 的后代都需要访问一个 getMap 方法，以便知道要跟哪个地图进行交互。不幸的是，使用 $parent 属性无法很好的扩展到更深层级的嵌套组件上。这也是依赖注入的用武之地，它用到了两个新的实例选项：provide 和 inject。

      provide 选项允许我们指定我们想要提供给后代组件的数据/方法。在这个例子中，就是 <google-map> 内部的 getMap 方法：

      mounted: function () {
  this.attachDatepicker('startDateInput')
  this.attachDatepicker('endDateInput')
},
methods: {
  attachDatepicker: function (refName) {
    var picker = new Pikaday({
      field: this.$refs[refName],
      format: 'YYYY-MM-DD'
    })
    this.$once('hook:beforeDestroy', function () {
      picker.destroy()
    })
  }
}

      然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性：

      name: 'unique-name-of-my-component'

      你可以在这里看到完整的示例。相比 $parent 来说，这个用法可以让我们在任意后代组件中访问 getMap，而不需要暴露整个 <google-map> 实例。这允许我们更好的持续研发该组件，而不需要担心我们可能会改变/移除一些子组件依赖的东西。同时这些组件之间的接口是始终明确定义的，就和 props

      Vue.component('unique-name-of-my-component', {
  // ...
})

      Malah Kaedah boleh ditakrifkan melalui komponen induknya: 

      name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

      Ini membolehkan komponen induk memfokus pada kotak input dalam <base-input> melalui kod berikut: 
        <p>
  <span>{{ folder.name }}</span>
  <tree-folder-contents :children="folder.children"/>
</p>
      • Apabila ref < Apabila /code> digunakan dengan v-for, rujukan yang anda dapat ialah tatasusunan yang mengandungi subkomponen sumber data yang sepadan ini.

        $refs hanya akan berkuat kuasa selepas komponen dipaparkan dan ia tidak responsif. Ini hanya berfungsi sebagai "escape hatch" untuk memanipulasi komponen anak secara langsung - anda harus mengelak daripada mengakses $refs dalam templat atau sifat yang dikira.

      • Suntikan Ketergantungan

        🎜at Sebelum ini, apabila kami menerangkan mencapai contoh komponen induk, Contoh seperti ini telah ditunjukkan: 🎜
        <ul>
  <li v-for="child in children">
    <tree-folder v-if="child.children" :folder="child"/>
    <span v-else>{{ child.name }}</span>
  </li>
</ul>
        🎜Dalam komponen ini, semua keturunan <google-map> perlu mengakses kaedah getMap untuk mengetahui perkara yang perlu diikuti Peta mana untuk berinteraksi dengan. Malangnya, menggunakan atribut $parent tidak menskalakan dengan baik kepada komponen bersarang yang lebih dalam. Di sinilah suntikan pergantungan masuk, menggunakan dua pilihan contoh baharu: provide dan inject. 🎜🎜Pilihan provide membolehkan kami menentukan data/kaedah yang ingin kami berikan kepada komponen keturunan. Dalam contoh ini, ia adalah kaedah getMap di dalam <google-map>: 🎜
        Failed to mount component: template or render function not defined.
        🎜 Kemudian dalam mana-mana komponen keturunan, kita boleh menggunakan inject pilihan untuk menerima atribut tertentu yang ingin kami tambahkan pada kejadian ini: 🎜
        beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}
        🎜 Anda boleh menemuinya di sini Lihat contoh lengkap. Berbanding dengan $parent, penggunaan ini membolehkan kami mengakses getMap dalam mana-mana komponen keturunan tanpa mendedahkan keseluruhan contoh <google-map>. Ini membolehkan kami untuk terus membangunkan komponen dengan lebih baik tanpa bimbang bahawa kami mungkin menukar/mengalih keluar sesuatu yang bergantung kepada subkomponen. Pada masa yang sama, antara muka antara komponen ini sentiasa ditakrifkan dengan jelas, sama seperti props. 🎜🎜Malah, anda boleh menganggap suntikan kebergantungan sebagai sebahagian daripada "prop yang sah secara meluas", kecuali: 🎜🎜🎜🎜Komponen moyang tidak perlu tahu komponen keturunan mana yang menggunakan sifat yang disediakannya🎜🎜🎜🎜Komponen keturunan tidak perlu tahu yang mana Dari mana datangnya sifat yang disuntik🎜

      Namun, suntikan kebergantungan masih memberi kesan negatif. Ia menggabungkan komponen dalam aplikasi anda dengan cara ia disusun pada masa ini, menjadikan pemfaktoran semula lebih sukar. Juga hartanah yang disediakan tidak responsif. Ini adalah dengan reka bentuk, kerana menggunakannya untuk membuat skala data terpusat dan menggunakan $root untuk melakukan ini adalah tidak cukup baik. Jika harta yang anda ingin kongsi adalah khusus untuk aplikasi anda dan bukannya generik, atau jika anda ingin mengemas kini data yang disediakan dalam komponen nenek moyang, maka ini bermakna anda mungkin perlu menggunakan sesuatu seperti Vuex ialah penyelesaian pengurusan keadaan sebenar. $root做这件事都是不够好的。如果你想要共享的这个属性是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像 Vuex 这样真正的状态管理方案了。

      你可以在 API 参考文档学习更多关于依赖注入的知识。


      程序化的事件侦听器

      现在，你已经知道了 $emit 的用法，它可以被 v-on 侦听，但是 Vue 实例同时在其事件接口中提供了其它的方法。我们可以：

      • 通过 $on(eventName, eventHandler) 侦听一个事件

      • 通过 $once(eventName, eventHandler) 一次性侦听一个事件

      • 通过 $off(eventName, eventHandler) 停止侦听一个事件

      你通常不会用到这些，但是当你需要在一个组件实例上手动侦听事件时，它们是派得上用场的。它们也可以用于代码组织工具。例如，你可能经常看到这种集成一个第三方库的模式：

      components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}

      这里有两个潜在的问题：

      • 它需要在这个组件实例中保存这个 picker，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。

      • 我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化地清理我们建立的所有东西。

      你应该通过一个程序化的侦听器解决这两个问题：

      <my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

      使用了这个策略，我甚至可以让多个输入框元素同时使用不同的 Pikaday，每个新的实例都程序化地在后期清理它自己：

      <script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
  template: '#hello-world-template'
})

      查阅这个 fiddle 可以了解到完整的代码。注意，即便如此，如果你发现自己不得不在单个组件里做很多建立和清理的工作，最好的方式通常还是创建更多的模块化组件。在这个例子中，我们推荐创建一个可复用的 <input-datepicker>

      Anda boleh mengetahui lebih lanjut tentang dokumentasi rujukan API Pengetahuan tentang suntikan pergantungan. 🎜🎜
      🎜

      Pendengar acara terprogram
      🎜Kini, anda sudah mengetahui penggunaan $emit, ia boleh didengari oleh v-on, tetapi tika Vue juga berada dalam antara muka acaranya Kaedah lain ialah disediakan. Kita boleh: 🎜
      • 🎜Mendengar acara melalui $on(eventName, eventHandler)🎜🎜
      • 🎜melalui< code>$once(eventName, eventHandler) Dengar acara pada satu masa🎜🎜
      • 🎜Berhenti mendengar acara melalui $off(eventName, eventHandler)🎜🎜🎜🎜 anda Ini biasanya tidak digunakan, tetapi ia berguna apabila anda perlu mendengar acara secara manual pada contoh komponen. Ia juga boleh digunakan dalam alat organisasi kod. Sebagai contoh, anda mungkin sering melihat corak penyepaduan perpustakaan pihak ketiga ini: 🎜
        Vue.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})
        🎜Terdapat dua masalah yang berpotensi di sini: 🎜
        • 🎜Ia memerlukan Simpan pemilih ini dalam contoh komponen ini supaya hanya cangkuk kitar hayat boleh mengaksesnya jika boleh. Ini bukan masalah yang serius, tetapi ia boleh dianggap kekacauan. 🎜🎜
        • 🎜Kod binaan kami adalah bebas daripada kod pembersihan kami, yang menyukarkan kami untuk membersihkan semua yang kami bina secara pemrograman. 🎜🎜🎜🎜Anda harus menyelesaikan kedua-dua masalah dengan pendengar terprogram: 🎜rrreee🎜Menggunakan strategi ini, saya juga boleh mempunyai berbilang elemen kotak input menggunakan Pikaday yang berbeza pada masa yang sama, dengan setiap kejadian baharu secara pemprograman Ia membersihkan dirinya kemudian: 🎜rreee 🎜 Lihat fiddle ini untuk mendapatkan kod lengkap. Ambil perhatian bahawa walaupun begitu, jika anda mendapati diri anda perlu melakukan banyak persediaan dan kerja pembersihan dalam satu komponen, selalunya lebih baik untuk mencipta lebih banyak komponen modular. Dalam contoh ini, kami mengesyorkan anda membuat komponen <input-datepicker> yang boleh digunakan semula. 🎜

          Untuk mengetahui lebih lanjut tentang pendengar terprogram, sila lihat kaedah/acara kejadianAPI yang berkaitan.

          Perhatikan bahawa sistem acara Vue berbeza daripada EventTarget API penyemak imbas. Walaupun ia berfungsi sama, $emit, $on dan $off bukanlah dispatchEvent, Alias ​​untuk addEventListener dan removeEventListener. $emit、$on, 和 $off 并不是 dispatchEvent、addEventListener 和 removeEventListener 的别名。


          循环引用

          递归组件

          组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事：

          rrreee

          当你使用 Vue.component 全局注册一个组件时，这个全局的 ID 会自动设置为该组件的 name 选项。

          rrreee

          稍有不慎，递归组件就可能导致无限循环：

          rrreee

          类似上述的组件将会导致“max stack size exceeded”错误，所以请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)。


          组件之间的循环引用

          假设你需要构建一个文件目录树，像访达或资源管理器那样的。你可能有一个 <tree-folder> 组件，模板是这样的：

          rrreee

          还有一个 <tree-folder-contents> 组件，模板是这样的：

          rrreee

          当你仔细观察的时候，你会发现这些组件在渲染树中互为对方的后代和祖先——一个悖论！当通过 Vue.component


          Rujukan bulatan

          Komponen rekursif

          komponen OK Memanggil diri mereka dalam templat mereka sendiri. Walau bagaimanapun, mereka hanya boleh melakukan ini melalui pilihan nama:

          rrreee🎜Apabila anda menggunakan Vue.component untuk mendaftarkan komponen secara global, ID global akan ditetapkan secara automatik kepada The Pilihan name untuk komponen ini. 🎜rrreee🎜Jika anda tidak berhati-hati, komponen rekursif boleh menyebabkan gelung tak terhingga: 🎜rrreee🎜Komponen seperti di atas akan menyebabkan ralat "melebihi saiz tindanan maksimum", jadi sila pastikan bahawa panggilan rekursif adalah bersyarat (contohnya, menggunakan < kod>v-jika daripada salah). 🎜🎜
          🎜

          Rujukan bulatan antara komponen🎜🎜Andaian Anda perlukan untuk membina pepohon direktori fail, seperti Finder atau Explorer. Anda mungkin mempunyai komponen <tree-folder>, templat kelihatan seperti ini: 🎜rrreee🎜 Terdapat juga komponen <tree-folder-contents>, iaitu templat kelihatan seperti ini daripada: 🎜rrreee🎜 Apabila anda melihat dengan teliti, anda akan melihat bahawa komponen ini adalah keturunan dan nenek moyang satu sama lain dalam pokok render - satu paradoks! Paradoks ini diselesaikan secara automatik apabila komponen didaftarkan secara global melalui Vue.component. Jika ini yang anda lakukan, maka anda boleh melangkau ini. 🎜🎜Namun, jika anda menggunakan sistem modul untuk bergantung/mengimport komponen, seperti melalui webpack atau Browserify, anda akan menghadapi ralat: 🎜rrreee🎜Untuk menerangkan perkara yang berlaku di sini, mari kita panggil dua komponen A dan B dahulu . Sistem modul mendapati bahawa ia memerlukan A, tetapi pertama A bergantung pada B, tetapi B bergantung pada A, tetapi A bergantung pada B, dan seterusnya. Ini menjadi gelung dan saya tidak tahu bagaimana untuk menghuraikan sepenuhnya salah satu komponen tanpa melalui yang lain. Untuk menyelesaikan masalah ini, kita perlu memberikan sistem modul titik di mana "A memerlukan B, tetapi kita tidak perlu menghuraikan B terlebih dahulu 🎜

          Dalam contoh kami, tetapkan komponen <tree-folder> ke titik itu. Kami tahu bahawa komponen anak yang menyebabkan paradoks ialah komponen <tree-folder-contents>, jadi kami akan menunggu sehingga cangkuk kitaran hayat beforeCreate untuk mendaftarkannya: <tree-folder> 组件设为了那个点。我们知道那个产生悖论的子组件是 <tree-folder-contents> 组件，所以我们会等到生命周期钩子 beforeCreate 时去注册它：

          rrreee

          或者，在本地注册组件的时候，你可以使用 webpack 的异步 import：

          rrreee

          这样问题就解决了！


          模板定义的替代品

          内联模板

          当 inline-template 这个特殊的特性出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。

          rrreee

          内联模板需要定义在 Vue 所属的 DOM 元素内。

          不过，inline-template 会让模板的作用域变得更加难以理解。所以作为最佳实践，请在组件内优先选择 template 选项或 .vue 文件里的一个 <template> 元素来定义模板。


          X-Template

          另一个定义模板的方式是在一个 <script> 元素中，并为其带上 text/x-template rrreee

          Atau, apabila mendaftar komponen secara tempatan, anda boleh menggunakan import tak segerak webpack:

          rrreee

          Masalah ini telah diselesaikan! . /code> Apabila atribut khas ini muncul pada komponen anak, komponen akan menggunakan kandungan di dalamnya sebagai templat dan bukannya menggunakannya sebagai kandungan yang akan diedarkan. Ini menjadikan penulisan templat lebih fleksibel.
          rrreee

          Templat sebaris perlu ditakrifkan dalam elemen DOM yang dimiliki oleh Vue.

          Walau bagaimanapun, inline-template akan menjadikan skop templat lebih sukar untuk difahami. Jadi sebagai amalan terbaik, sila pilih pilihan template dalam komponen atau elemen <template> dalam fail .vue untuk mentakrifkan templat.

          X-Template


          Cara lain untuk menentukan templat ialah dalam elemen <script> dan berikannya Bawa jenis text/x-template, dan kemudian rujuk templat melalui id. Contohnya:

          rrreee

          x-template perlu ditakrifkan di luar elemen DOM yang dimiliki oleh Vue.

          Ini boleh digunakan untuk tunjuk cara atau aplikasi yang sangat kecil di mana templat adalah sangat besar, tetapi sebaliknya sila elakkan menggunakannya kerana ia akan memisahkan templat daripada definisi komponen lain.

          Kawal kemas kini

          Terima kasih kepada sistem responsif Vue, ia sentiasa tahu masa untuk mengemas kini (jika anda menggunakannya dengan betul). Walau bagaimanapun, terdapat beberapa kes kelebihan di mana anda ingin memaksa kemas kini walaupun data reaktif nampaknya tidak berubah. Terdapat juga situasi di mana anda ingin menghalang kemas kini yang tidak perlu. .

          🎜Anda mungkin tidak perasan pertimbangan pengesanan perubahan untuk 🎜Arrays🎜 atau 🎜Objek🎜, atau anda mungkin bergantung pada keadaan yang tidak dijejaki oleh sistem reaktif Vue. 🎜

          Walau bagaimanapun, jika anda telah melakukan perkara di atas dan masih mendapati bahawa kadang-kadang anda perlu memaksa kemas kini secara manual, maka anda boleh melakukan ini melalui $forceUpdate. $forceUpdate 来做这件事。


          通过 v-once 创建低开销的静态组件

          渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 v-once 特性以确保这些内容只计算一次然后缓存起来，就像这样：

          rrreee

          再说一次，试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉 v-once

          Buat komponen statik overhed rendah dengan v-sekali

          Memberikan elemen HTML biasa dalam Vue adalah sangat pantas, tetapi kadangkala anda mungkin mempunyai komponen yang mengandungi banyak kandungan statik. Dalam kes ini, anda boleh menambah atribut v-sekali pada elemen akar untuk memastikan kandungan hanya dikira sekali dan kemudian dicache, seperti ini: 🎜rrreee
          🎜Sekali lagi, cuba Jangan' t terlalu menggunakan corak ini. Pada keadaan yang jarang berlaku apabila anda perlu membuat banyak kandungan statik, ia akan memberi anda kemudahan, tetapi melainkan anda sangat berhati-hati tentang memperlahankan rendering, ia sama sekali tidak perlu - ditambah lagi ia akan menyebabkan banyak masalah dalam siaran. Sebagai contoh, bayangkan bahawa pembangun lain tidak biasa dengan v-sekali atau terlepasnya dalam templat Mereka mungkin menghabiskan masa berjam-jam untuk mencari sebab templat tidak dikemas kini dengan betul. 🎜🎜🎜🎜🎜