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.
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: 'appName',
setup(){
//变量
let name = '打工仔'
let age = 18
//方法
function say(){
console.log(`我只是一个${name},今年${age}岁`)
}
//返回一个对象
return {
name,
age,
say
}
}
}
</script> dalam skrip Tambah persediaan pada teg, seperti:
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 'vue'
export default {
name: 'Home',
setup(){
let name = ref('中介')
let age = ref(18)
console.log(name)
console.log(age)
//方法
function say(){
name='波妞'
age=18
}
return {
name,
age,
say
}
}
}
</script><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 'vue'
export default {
name: 'Home',
setup(){
let name = ref('中介')
let age = ref(18)
let job=ref({
occupation:'程序员',
salary:'10k'
})
console.log(name)
console.log(age)
//方法
function say(){
job.value.salary='12k'
}
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 'vue'
export default {
name: 'Home',
setup(){
let name = ref('波妞')
let age = ref(18)
let job=reactive({
occupation:'程序员',
salary:'10k'
})
let hobby=reactive(['吃饭','睡觉','打豆豆'])
console.log(name)
console.log(age)
//方法
function say(){
job.salary='12k'
hobby[0]='学习'
}
return {
name,
age,
job,
say,
hobby
}
}
}
</script><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 'vue'
export default {
name: 'Home',
setup(){
let data=reactive({
name:'波妞',
age:18,
job:{
occupation:'程序员',
salary:'10k'
},
hobby:['吃饭','睡觉','打豆豆']
})
//方法
function say(){
data.job.salary='12k'
data.hobby[0]='学习'
}
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直接通过下标改数组，页面也不会实时更新
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
