Apakah penggunaan persediaan dalam vue3.0

Dalam vue3.0, fungsi persediaan ialah pintu masuk ke gabungan API dan digunakan untuk menentukan data dan parameter Sintaks ialah "setup(props,{slots,attrs,emit}){const name =. 'name'return {name}}"; fungsi ini hanya boleh segerak dan bukan tak segerak.

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue3, komputer DELL G3.

Apakah kegunaan persediaan dalam vue3.0

1. Ciri dan fungsi fungsi persediaan

Sudah pasti Vue3.0. adalah serasi Versi Vue2.x bermakna kami boleh menggunakan sintaks Vue2.x yang berkaitan dalam Vue3 dalam kerja harian kami Tetapi apabila anda benar-benar mula menggunakan Vue3 untuk menulis projek, anda akan mendapati bahawa ia adalah lebih mudah daripada Vue2.x.

Fungsi ciri utama Vue3---- persediaan

1. Fungsi persediaan ialah fungsi antara dua fungsi cangkuk fungsi kitaran hayat sebelumCreate dan Created dan data tidak boleh digunakan dalam fungsi persediaan. Data dan kaedah dalam kaedah

2. Fungsi persediaan ialah pintu masuk ke API Komposisi (API Komposisi)

3. Pembolehubah dan kaedah ditakrifkan dalam fungsi persediaan perlu dikembalikan pada akhirnya Jika tidak, anda tidak boleh menggunakan

dalam templat 2. Nota mengenai fungsi persediaan:

1. Sejak. kaedah kitaran hayat Dicipta belum dilaksanakan apabila fungsi persediaan dilaksanakan, Oleh itu, dalam fungsi persediaan, pembolehubah dan kaedah data dan kaedah tidak boleh digunakan

　2. Oleh kerana kita tidak boleh menggunakan data dan kaedah dalam fungsi persediaan, Vue secara langsung menggantikan pembolehubah dan kaedah dalam fungsi persediaan untuk mengelakkan penggunaan kami yang salah ini telah diubah suai kepada tidak ditentukan

3. Fungsi persediaan hanya boleh segerak dan bukan tak segerak

<.>Penggunaan 1: Gunakan dalam kombinasi dengan ref

<template>
 <div id="app">
  {{name}}
  <p>{{age}}</p>
  <button @click="plusOne()">+</button>
 </div>
</template>
 
<script>
import {ref} from &#39;vue&#39;
export default {
 name:&#39;app&#39;,
 data(){
  return {
   name:&#39;xiaosan&#39;
  }
 },
 setup(){
  const name =ref(&#39;小四&#39;)
  const age=ref(18)
  function plusOne(){
   age.value++ //想改变值或获取值 必须.value
  }
  return { //必须返回 模板中才能使用
   name,age,plusOne
  }
 }
}
</script>

Penggunaan 2: Pemisahan kod

API Pilihan dan API Komposisi

Konvensyen API Pilihan:

Kita perlu menetapkan parameter penerima dalam prop

Kita perlu menetapkan pembolehubah dalam data

Kita perlu menetapkan sifat yang dikira dalam pengiraan

Kita perlu menetapkan sifat mendengar dalam tonton

Kami perlu menetapkan kaedah acara dalam kaedah

Anda akan mendapati API Pilihan semuanya bersetuju di mana kami harus melakukan sesuatu, yang seterusnya memaksa kami melakukan pemisahan kod pada tahap tertentu.

Sekarang kami menggunakan API Komposisi, konvensyen ini tidak lagi berlaku Oleh itu, kod kawalan kami boleh ditulis dalam persediaan.

Fungsi persediaan menyediakan dua parameter, prop dan konteks yang penting ialah tiada ini dalam fungsi persediaan Dalam vue3.0, mengaksesnya menjadi bentuk berikut: this.xxx=》context. xxx

Kami tidak lagi mempunyai konteks ini dan tiada pemisahan kod paksa API Pilihan. API Komposisi memberi kita dunia yang lebih luas, jadi kita perlu lebih berhati-hati dan terkekang.

Untuk kod logik yang kompleks, kita mesti memberi lebih perhatian kepada niat asal API Komposisi, dan jangan kedekut menggunakan API Komposisi untuk memisahkan kod dan memotongnya kepada pelbagai modul untuk dieksport.

Kami menjangkakan ini akan menjadi seperti ini:

importuseAfrom'./a';
importuseBfrom'./b';
importuseCfrom'./c';
exportdefault{
setup (props) {
let{ a, methodsA } = useA();
let{ b, methodsB } = useA();
let{ c, methodsC } = useC();
return{
a,
methodsA,
b,
methodsB,
c,
methodsC
}
}
}

Walaupun jumlah kod kandungan persediaan semakin besar, kami akan sentiasa bergerak ke hadapan dengan cara yang besar tetapi tidak tidak kemas dan mempunyai struktur kod yang jelas.

[Cadangan berkaitan: "

tutorial vue.js"]

Atas ialah kandungan terperinci Apakah penggunaan persediaan dalam vue3.0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!