Was ist der Unterschied zwischen der Syntax von vue3 und vue2?

Der Syntaxunterschied zwischen vue3 und vue2: 1. vue2 verwendet Webpack zum Erstellen des Projekts, während vue3 Vite zum Erstellen des Projekts verwendet. 2. vue2 kann das Pototyp-Formular zum Betrieb verwenden, und der Konstruktor wird eingeführt, während vue3 es ist Es ist notwendig, die Strukturform für den Betrieb zu verwenden, und die Fabrikfunktion wird eingeführt.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue3-Version, Dell G3-Computer.

Was ist der Unterschied zwischen der Syntax von vue3 und vue2?

1. Webpack und Vite? das Modul, und schließlich Packen Sie es und teilen Sie Ihnen dann mit, dass der Server bereit ist, mit der Arbeit zu beginnen. vue3 verwendet Vite, um das Projekt zu erstellen. dann die Eingabedatei, Dynamischer Import (dynamischer Import) Code Der größte Vorteil und Unterschied des Split-Points (Code-Splitting)

besteht darin, dass einige Codedateien im Projekt schneller gespeichert und aktualisiert werden können, um später den tatsächlichen Effekt zu sehen das sogenannte (Hot Update)

2 In der .main.js-Datei

vue2 können wir zum Betrieb die Prototyp-Form (Prototyp) verwenden. Der Konstruktor

vue3 muss zum Betrieb die Strukturform verwenden . Die Factory-Funktion vue3 wird eingeführt. Es darf kein Root-Tag in der App-Komponente vorhanden sein

3. Die Setup-Funktion muss

<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>

zurückgeben ${name} muss dies nicht verwenden, um zu funktionieren. Diese Funktion dient lediglich dazu, die Variablen in einem bestimmten Bereich abzurufen, und die Setup-Funktion stellt eine Funktion bereit, die sich derzeit nur in diesem Bereich befindet. Ich bin derzeit sehr unzufrieden Bedeutet das nicht, dass jede Variable und Methode, die ich definiere, zurückgegeben werden muss? im Setup während der Kompilierung und Laufzeit

Hinweis: Das Setup erfolgt früher als zuvor. Erstellen und erstellen Sie Lebenszyklen. Das heißt, wenn Sie dies direkt verwenden, um die Daten in Daten abzurufen, sind sie immer noch undefiniert

Die Setup-Syntax-Lektion erhält 2 Parameter-Setup(props,context)Wir alle kennen this.$attrs, this.$slots in vue2, this.$emit ist äquivalent zu attrs, slots, emit in contextHinweis: Wenn wir nur einen Parameter akzeptieren, ist der Auf der Seite wird eine Warnung angezeigt, die jedoch keinen Einfluss auf die Verwendung hat -if haben in vue2 eine höhere Priorität als die v-for-Anweisung, und es wird nicht empfohlen, sie zusammen zu verwenden

v- in vue3 for und v-if behandeln nur das aktuelle v-if als Urteilsaussage in v-. für und werden nicht miteinander in Konflikt stehen

keyCode wird als Modifikator von v-on in vue3 entfernt, und config.keyCodes wird natürlich nicht unterstützt

V-on.native-Modifikator in vue3 entfernen

Filter in vue3 entfernen

5.ref und reactive

ref

wandeln die Daten in reaktionsfähige Daten um, ref wandelt sie in Objekte um. Wenn wir den Code direkt bedienen, können Sie feststellen, dass der aktuelle Name und das Alter nicht geändert werden können Ändern Sie die Seite weiterhin über get und set. Zu diesem Zeitpunkt müssen Sie .value verwenden, und die Referenz lautet immer noch Refimpl

<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>

In diesem Fall ändern wir die Seite. Es ist nicht erforderlich, {{name.value} anzuzeigen. }. Tatsächlich muss es nicht so sein. In unserem vue3 erkennen wir, dass Ihre Referenz ein Objekt ist, und fügen Ihnen automatisch .value hinzu. Zu diesem Zeitpunkt verwenden wir XX.value.XX, um es zu ändern

<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>

Zu diesem Zeitpunkt drucken wir obj.value Es ist kein Refimpl-Objekt mehr und wird zu einem Proxy-Objekt, da die unterste Ebene von vue3 ein Proxy-Objekt ist. Ein grundlegender Datentyp. Die Datenentführung erfolgt basierend auf get und set in Object.defineProperty. Dies entspricht dem automatischen Aufruf von reactive, wenn wir ref

reactive

Wir haben oben gesagt, dass das Objekt in ref aufgerufen wird reaktiv. Jetzt konvertieren wir es direkt in Proxy. Es hat eine tiefe Reaktionsfähigkeit. Zu diesem Zeitpunkt werden Sie definitiv das Gefühl haben, dass es besser ist, den von .value bereitzustellen ref. Fühlt es sich nicht so an, aber es gibt ein Problem, wenn Sie zu diesem Zeitpunkt nicht ständig auf .value klicken. Sie können die Form simulierter Daten in vue2 verwenden, die sich besser anfühlt.

<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>

Der Unterschied zwischen ref und reaktiv

ref definiert den grundlegenden Datentyp

ref implementiert die Datenentführung durch get und set von Object.defineProperty()

ref betreibt data.value, das beim Lesen nicht benötigt wird. value

reactive definiert den Objekt- oder Array-Datentyp.reactive implementiert die Datenentführung durch Proxy Get und Set von .defineProperty führen Datenhijacking durch, um Reaktionsfähigkeit zu erreichen. In vue2 werden nur die Get- und Set-Methoden zum Lesen und Ändern von Eigenschaften verwendet. Wenn wir Eigenschaften hinzufügen oder löschen, wird die Seite nicht in Echtzeit aktualisiert.

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

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教程》】

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen der Syntax von vue3 und vue2?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!