Quelle est la différence entre la syntaxe de vue3 et vue2

La différence de syntaxe entre vue3 et vue2 : 1. vue2 utilise webpack pour construire le projet, tandis que vue3 utilise vite pour construire le projet ; 2. vue2 peut utiliser le formulaire pototype pour fonctionner, et le constructeur est introduit, tandis que vue3 Les opérations ont besoin à réaliser sous forme de structures et les fonctions d'usine sont introduites.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version Vue3, ordinateur Dell G3.

Quelle est la différence entre la syntaxe de vue3 et vue2

1 et vite

vue2 utilise webpack pour construire le projet

webpack commence par le fichier d'entrée, puis analyse le routage, puis le module. , et enfin Packez-le, puis dites-vous que le serveur est prêt à démarrer

vue3 utilise vite pour construire le projet

Dites-vous d'abord que le serveur est prêt, puis attendez que vous envoyiez une requête HTTP, puis. le fichier d'entrée, code d'importation dynamique (importation dynamique) Le plus grand avantage et la différence du point de partage (séparation du code)

est de permettre à certains fichiers de code du projet d'être enregistrés et mis à jour plus rapidement pour voir l'effet réel plus tard, qui est le soi-disant (mise à jour à chaud)

2 Dans le fichier .main.js

vue2, nous pouvons utiliser le formulaire prototype (prototype) pour fonctionner. Le constructeur

vue3 doit utiliser le formulaire de structure pour fonctionner. La fonction d'usine

vue3 est introduite. Il ne peut y avoir de balise racine dans le composant de l'application

3 La fonction de configuration

La fonction de configuration doit renvoyer

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

Vous constaterez que le nom est dans le $ actuel. {name} n'a pas besoin d'utiliser ceci pour fonctionner, cette fonction sert simplement à obtenir les variables dans une certaine portée, et la fonction de configuration fournit une fonction qui n'est actuellement que dans cette portée

Je me sens très mécontent en ce moment. Cela ne signifie-t-il pas que chaque variable et méthode que je définis doit être renvoyée ? Vue3 nous fournit

l'ajout d'une configuration à la balise de script telle que : , ce qui équivaut à être placé dans configuration pendant la compilation et l'exécution

Remarque : la configuration est antérieure à avantCréer et créer des cycles de vie C'est-à-dire que si vous l'utilisez directement pour obtenir les données dans data, elles seront toujours indéfinies

La leçon de syntaxe de configuration reçoit 2 paramètres. setup(props,context)

Nous savons tous this.$attrs, this.$slots dans vue2, this.$emit est équivalent à attrs, slots, submit in context

Remarque : lorsque nous n'acceptons qu'un seul paramètre, la page affichera un avertissement, mais cela n'affecte pas l'utilisation

4. Instructions et slots

vue2 Vous pouvez utiliser slot directement, mais v-slot doit être utilisé dans vue3

v-for et v-. if a une priorité plus élevée dans vue2 que l'instruction v-for, et il n'est pas recommandé de les utiliser ensemble

v- dans vue3 for et v-if ne traitera que le v-if actuel comme une déclaration de jugement dans v-for. , et n'entreront pas en conflit les uns avec les autres

keyCode est supprimé en tant que modificateur de v-on dans vue3, et bien sûr config.keyCodes n'est pas pris en charge

Supprimez le modificateur v-on.native dans vue3

Supprimez le filtre dans vue3

5.ref et reactive

ref

transformez les données en données réactives, ref les transforme en objet, si nous exploitons directement le code, il ne peut pas être modifié. Vous constaterez que le nom et l'âge actuels sont toujours. modifiez la page via get et set. À ce stade, vous devez utiliser .value, et la référence est toujours 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>

Dans ce cas, nous modifions la page. Il n'est pas nécessaire d'afficher {{name.value}} En fait, cela n'a pas besoin d'être comme ça. Dans notre vue3, nous détecterons que votre ref est un objet et vous ajouterons automatiquement .value Si nous définissons l'objet ref nous-mêmes, l'instance deviendra refimpl. cette fois, utilisez XX.value.XX pour le modifier

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

A ce moment, nous imprimons obj.value Ce n'est plus un objet refimpl et devient un objet proxy, car la couche inférieure de vue3 est un objet proxy, un. type de données de base. Le détournement de données est effectué sur la base de get et set dans Object.defineProperty. Vue3 a encapsulé reactive, ce qui équivaut à appeler automatiquement reactive lorsque nous appelons ref

reactive

Nous avons dit ci-dessus que l'objet dans ref appellera reactive. . Convertissez l'objet en proxy. Maintenant, nous le transformons directement en proxy via réactif. Il a une profonde réactivité

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

À ce moment-là, vous sentirez certainement qu'il y a trop de méthodes. .N'est-ce pas comme ça ? C'est cool, mais il y a un problème. S'il y a un tas de données, vous n'avez pas besoin d'aller sur .value tout le temps et de cliquer jusqu'à ce qu'il fume. peut utiliser la forme de données simulées dans vue2, ce qui se sentira mieux

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

La différence entre ref et réactif

ref définit le type de données de base

ref implémente le détournement de données via get et set de Object.defineProperty()

ref exploite data.value, qui n'est pas nécessaire lors de la lecture. value

reactive définit le type de données d'objet ou de tableau

reactive implémente le détournement de données via Proxy

le fonctionnement réactif et la lecture des données ne sont pas requis value

6 Le principe réactif de vue3

Le principe réactif de vue2 utilise Object. Les méthodes get et set de .defineProperty effectuent un détournement de données pour obtenir de la réactivité. Dans vue2, seules les méthodes get et set sont utilisées pour lire et modifier les propriétés. Lorsque nous ajoutons ou supprimons, la page ne sera pas mise à jour en temps réel.

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!