Apakah perbezaan antara sintaks vue3 dan vue2

Perbezaan sintaks antara vue3 dan vue2: 1. vue2 menggunakan webpack untuk membina projek, manakala vue3 menggunakan vite untuk membina projek; 2. vue2 boleh menggunakan pototype untuk beroperasi, dan pembina diperkenalkan dan vue3 perlu menggunakan bentuk struktur untuk beroperasi, dan fungsi kilang diperkenalkan.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi Vue3, komputer Dell G3.

Apakah perbezaan antara sintaks vue3 dan vue2

1. borang webpack. Membina projek Webpack bermula dengan fail kemasukan, kemudian menganalisis laluan, kemudian modul, dan akhirnya membungkusnya, dan kemudian memberitahu anda bahawa pelayan sedia untuk bermula

vue3 menggunakan vite untuk membina projek

Mula-mula memberitahu anda bahawa pelayan sudah sedia, kemudian tunggu untuk anda menghantar permintaan HTTP, kemudian fail masukan, Import Dinamik (import dinamik) titik perpecahan kod (pemisahan kod)

Faedah dan perbezaan terbesar adalah Untuk membolehkan anda melihat kesan sebenar dengan lebih cepat apabila anda menyimpan data yang dikemas kini pada masa hadapan apabila terdapat lebih banyak fail kod dalam projek, ia adalah yang dipanggil (panas kemas kini)

fail 2.main.js

Dalam vue2 kita boleh menggunakan bentuk prototaip (prototaip) untuk beroperasi, dan pengenalan daripada pembina Dalam vue3 kita perlu menggunakan bentuk struktur untuk beroperasi, pengenalannya ialah Fungsi Kilang

Tiada teg akar dalam komponen aplikasi dalam vue3

3. Fungsi persediaan

fungsi persediaan mesti kembali Keluar

Anda akan mendapati bahawa nama dalam ${name} semasa tidak perlu dikendalikan dengan ini. Fungsi ini hanyalah untuk mendapatkan pembolehubah dalam skop tertentu, dan fungsi persediaan menyediakan

pada masa ini hanya dalam skop ini, saya berasa sangat tidak berpuas hati . Bukankah ini bermakna setiap pembolehubah dan kaedah yang saya tentukan perlu dikembalikan kepada kami dengan

<script>
 export default {
  name: &#39;appName&#39;,
  setup(){
  //变量
   let name = &#39;打工仔&#39;
   let age = 18
   //方法
   function say(){
    console.log(`我只是一个${name},今年${age}岁`)
   }
   //返回一个对象
   return {
    name,
    age,
    say
   }
  }
 }
</script>

dalam skrip Tambah persediaan pada teg, seperti: , yang bersamaan dengan diletakkan dalam persediaan semasa menyusun dan menjalankan

Nota: persediaan lebih awal daripada kitaran hayat cipta dan ciptaan sebelum ini, yang bermaksud bahawa ia berada secara langsung dalam semasa Gunakan ini untuk mendapatkan data dalam data. , dan output masih tidak ditentukan

Pelajaran sintaks persediaan menerima 2 persediaan parameter(props,konteks)

Kita semua tahu ini.$attrs, ini dalam vue2, ini.$ emit adalah bersamaan dengan attrs, slots, emit dalam konteks

Nota: Apabila kami hanya menerima satu parameter, halaman akan menggesa amaran, tetapi ia tidak menjejaskan penggunaan

4. Arahan dan slot

Anda boleh menggunakan slot terus dalam vue2, tetapi dalam vue3 anda mesti menggunakan borang v-slotv-for dan v -If dalam vue2, arahan v-for mempunyai keutamaan tertinggi, dan tidak disyorkan untuk menggunakannya bersama

v-for dan v-if dalam vue3, v-if semasa hanya akan dianggap sebagai salah satu daripada pernyataan v-for Judgement tidak akan bercanggah antara satu sama lain

Alih keluar Kod kunci sebagai pengubah suai v-on dalam vue3, dan sudah tentu tidak menyokong config.keyCodes

Alih keluar v-on. pengubah suai asli dalam vue3

Alih keluar penapis penapis

5.ref dan reaktif

ref The data menjadi data responsif, dan ref mengubahnya menjadi objek Jika kami mengendalikan kod secara langsung, kami tidak boleh mengubah suainya Anda akan mendapati bahawa nama dan umur semasa masih mengubah suai halaman melalui get dan set Pada masa ini, anda perlu menggunakannya .value, dan ref atau Refimpl

Dalam kes ini, kami tidak perlu memaparkan {{name.value}} pada halaman sebenarnya, ini tidak perlu dalam vue3 kami. kami akan mengesan bahawa ref anda ialah objek Ia akan menambahkan .value kepada anda secara automatik. Jika kami menentukan objek ref sendiri, instance akan menjadi reimpl Pada masa ini, gunakan XX.value.XX untuk mengubahnya

<template>
  <div class="home">
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <button @click="say">修改</button>
  </div>
</template>
<script>
import {ref} from &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;中介&#39;)
    let age = ref(18)
    console.log(name)
    console.log(age)
    //方法
    function say(){
      name=&#39;波妞&#39;
      age=18
    }
    return {
      name,
      age,
      say
    }
  }
}
</script>

Pada masa ini kami mencetak obj.value, Ia bukan lagi objek reimpl, ia telah menjadi objek proksi, kerana lapisan bawah vue3 adalah objek proksi, dan jenis data asas dirampas oleh get dan ditetapkan dalam Object.defineProperty. Vue3 telah merangkumkan reaktif, yang bersamaan dengan apa yang kita lakukan dalam Apabila memanggil ref, reaktif

reaktif

<template>
  <div class="home">
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <h2>职业：{{job.occupation}}</h2>
    <h2>薪资：{{job.salary}}</h2>
    <button @click="say">修改</button>
  </div>
</template>
<script>
import {ref} from &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;中介&#39;)
    let age = ref(18)
    let job=ref({
      occupation:&#39;程序员&#39;,
      salary:&#39;10k&#39;
    })
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.value.salary=&#39;12k&#39;
    }
    return {
      name,
      age,
      job,
      say
    }
  }
}
</script>

akan dipanggil secara automatik Responsif mendalam

Pada masa ini, anda pasti akan merasakan bahawa terdapat terlalu banyak kaedah Adalah lebih baik untuk menggunakan .nilai yang disediakan oleh ref Adakah ia sejuk dan menyegarkan data tidak perlu pergi ke .value sepanjang masa dan klik sehingga ia berasap Pada masa ini, anda boleh menggunakan bentuk data simulasi dalam vue2, yang akan terasa lebih wangi

<template>
  <div class="home">
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <h2>职业：{{job.occupation}}<br>薪资：{{job.salary}}</h2>
    <h3>爱好：{{hobby[0]}},{{hobby[1]}},{{ hobby[2] }}</h3>
    <button @click="say">修改</button>
  </div>
</template>
<script>
import {ref,reactive} from &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;波妞&#39;)
    let age = ref(18)
    let job=reactive({
      occupation:&#39;程序员&#39;,
      salary:&#39;10k&#39;
    })
    let hobby=reactive([&#39;吃饭&#39;,&#39;睡觉&#39;,&#39;打豆豆&#39;])
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.salary=&#39;12k&#39;
      hobby[0]=&#39;学习&#39;
    }
    return {
      name,
      age,
      job,
      say,
      hobby
    }
  }
}
</script>

Perbezaan antara. ref dan reaktif

ref mentakrifkan jenis data asas

<template>
  <div class="home">
    <h1>姓名：{{data.name}}</h1>
    <h1>年龄：{{data.age}}</h1>
    <h2>职业：{{data.job.occupation}}<br>薪资：{{data.job.salary}}</h2>
    <h3>爱好：{{data.hobby[0]}},{{data.hobby[1]}},{{ data.hobby[2] }}</h3>
    <button @click="say">修改</button>
  </div>
</template>
<script>
import {reactive} from &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let data=reactive({
      name:&#39;波妞&#39;,
      age:18,
      job:{
        occupation:&#39;程序员&#39;,
        salary:&#39;10k&#39;
      },
      hobby:[&#39;吃饭&#39;,&#39;睡觉&#39;,&#39;打豆豆&#39;]
    })
    //方法
    function say(){
      data.job.salary=&#39;12k&#39;
      data.hobby[0]=&#39;学习&#39;
    }
    return {
      data,
      say,
    }
  }
}
</script>

ref melaksanakan rampasan data melalui get dan set Object.defineProperty()

ref mengendalikan data.value, iaitu tidak diperlukan semasa membaca. value

reaktif mentakrifkan jenis data objek atau tatasusunan

reaktif melaksanakan rampasan data melalui Proksi

operasi reaktif dan membaca data tidak diperlukan

6. Prinsip responsif vue3

Prinsip responsif vue2 menggunakan get dan set Object.defineProperty untuk melakukan rampasan data untuk mencapai responsifHanya ada get dan set dalam vue2 Kaedah untuk membaca dan mengubah suai atribut Apabila kami menambah atau memadam, halaman tidak akan dikemas kini dalam masa nyata

直接通过下标改数组，页面也不会实时更新

vue3中响应式原理使用Proxy进行代理，使用window内置对象Reflect反射，学了Es6的语法的就知道我们在使用Proxy进行代理，好比甲方公司给出需要什么技术的前端攻城狮，让乙方去干招聘、面试等环节

Proxy可以拦截对象中任意的属性变化，当然包括读写，添加，删除等

Reflect对源对象属性进行操作

const p=new Proxy(data, {
// 读取属性时调用
get (target, propName) {
return Reflect.get(target, propName)
},
//修改属性或添加属性时调用
set (target, propName, value) {
return Reflect.set(target, propName, value)
},
//删除属性时调用
deleteProperty (target, propName) {
return Reflect.deleteProperty(target, propName)
}
})

【相关推荐：《vue.js教程》】

Atas ialah kandungan terperinci Apakah perbezaan antara sintaks vue3 dan vue2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!