Comment démarrer rapidement avec vue3, apprenez ces API !

Comment démarrer rapidement avec vue3 ? Cet article partagera avec vous quelques API. Si vous apprenez ces API, vous pouvez démarrer directement avec vue3. J'apprendrai lentement les autres. J'espère que cela sera utile à tout le monde !

Ceux qui ont développé des projets avec vue2 souhaitent démarrer rapidement avec vue3. Il suffit de se familiariser avec quelques API. D'autres fonctionnalités seront progressivement comprises au cours du processus d'utilisation de vue3. Quiconque étudie certains principes de l'API après s'être familiarisé avec son utilisation sera progressivement capable de maîtriser vue3.

Et lorsque vous utilisez vue3 combiné avec ts, la proportion de ts dans le processus de développement n'est pas si grande si vous connaissez les bases de ts partagées auparavant, c'est suffisant pour le développement. [Recommandations associées : Tutoriel vidéo Vuejs]

API globale et API d'application

Un nouveau concept de vue3, renvoie une instance d'application qui fournit un contexte d'application, et l'ensemble de l'arborescence des composants montée par l'instance d'application partage le même contexte :

const app = createApp(App);
app.use(store).use(router).mount("#app");

vue2:

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

Ensuite, les API qui utilisaient Vue sont devenues cette application d'instance.:

Vue.componentapp.configapp.configapp.directiveapp.mixinapp.useD'autres API comme nextTick, h, etc. sont utilisées directement depuis la structure vue :

import { createApp, h, nextTick } from 'vue'

API de composition

app. composant
	app.directive
	app.mixin
	app.use

tips

vue3 n'utilise plus celavue3 le composant ne nécessite pas une balise racine, mais il y aura un avertissement Attributs superflus non-props

Il est recommandé d'utiliser des composants de fichier unique. Les codes d'implémentation suivants sont tous des composants de fichier unique

setup

C'est trop important, utilise vue3. cette fonction comme point d’entrée. Reçoit deux paramètres props et context. La fonction sera exécutée avant beforeCreate et créée. On peut dire qu'elle remplace beforeCreate et créée et devient le nouveau cycle de vie. La nouvelle API de composition est écrite dans la fonction de configuration.
props sont les accessoires de vue2, et le contexte fournit des attributs, des emplacements, des émissions, etc. En renvoyant un objet, les données réactives sont exposées au modèle, ce qui est équivalent aux données de vue2. La différence est que la fonction est également exposée au modèle de cette manière :

• <template>
    <div class="hello">
      <h1>{{ msg }}</h1>
      <h1 @click="test">{{ isRef }}</h1>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from "vue";
  
  export default defineComponent({
    name: "HelloWorld",
    props: {
      msg: String,
    },
    setup(props) {
      console.log(props.msg);
      let isRef = ref("is ref");
      const test = () => {
        console.log(isRef.value);
      };
      return {
        isRef,
        test,
      };
    },
  });
  </script>

Composant de fichier unique

Vue3. fournit également un seul composant de fichier (recommandé), ajoutez une configuration au script et le code à l'intérieur sera compilé dans la fonction de configuration. Quelques points importants :

La liaison de niveau supérieur sera exposée au modèle

La liaison de niveau supérieur déclarée (y compris les variables, les déclarations de fonction et le contenu introduit par l'importation) peut être utilisée directement dans le modèle Les données réactives, les composants, etc. peuvent également être utilisés directement :

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1 @click="test">{{ isRef }}</h1>
  </div>
<MyComponent />
</template>

<script lang="ts" setup>
import MyComponent from &#39;./MyComponent.vue&#39;
import { ref } from "vue";
const msg = "msg";
const isRef = ref("");
function test() {
  console.log(isRef.value);
}
</script>

En utilisant des composants à fichier unique, l'utilisation de certains attributs doit également être modifiée. Bien entendu, il existe d'autres API alternatives :

Propriétés

correspondantes

.

props et émetsref ou $parentdefineExposeuseSlots et useAttrs()

defineProps et definitionEmits
	slots et attrs
	ref 接受一个内部值并返回一个响应式且可变的 ref 对象，在setup函数内部访问ref函数需要加.value， 如果要加类型，要用泛型，不加则会类型推论，也可以不给初始值，则是any，且是undefined： const ref1 = ref(1); const ref2 = ref<number>(2); const ref3 = ref1.value;//不是响应式，相当于变量 const ref4 = ref();//refs.value是undefined ref2.value = 5;//赋值 读取都要.value 一般来说，ref只会赋值基础数据类型和数组，也可以泛型联合类型 如果将对象分配为ref值，则它将被reactive函数处理为深层的响应式对象： //不建议，内部也是reactive处理 const ref1 = ref({ a: 10, }); //不确定类型 const ref3 = ref<string | number>(); ref3.value = 1; ref3.value = ""; //数组对象，ts类型声明，用泛型 type Obj1 = { c: string }; type Obj2 = { b: string; c: Obj1[]; }; const ref2 = ref<Obj2[]>([ { b: "", c: [{ c: "" }], }, ]); reactive 用来声明响应式的对象，类型通过泛型添加： type Obj = { a: number; b: string; }; let obj = reactive<Obj>({ a: 10, b: "", }); let state = reactive({ a: 10, b: "", }); reactive将会解包所有深层的 refs，同时维持ref的响应性， 将ref分配给reactive的property时，ref也会被自动解包。 简单说就是ref的值和reactive的值响应式了 const count = ref(1) const obj = reactive({ count }) // ref 会被解包 console.log(obj.count === count.value) // true // 它会更新 `obj.count` count.value++ console.log(count.value) // 2 console.log(obj.count) // 2 // 它也会更新 `count` ref obj.count++ console.log(obj.count) // 3 console.log(count.value) // 3 //跟上面一样效果 const count = ref(1) const obj = reactive({}) obj.count = count console.log(obj.count) // 1 console.log(obj.count === count.value) // true toRef 为源响应式对象上的某个property新创建一个ref，也就是reactive创建的才可以, 会保持对其源 property 的响应式连接： const state = reactive({ foo: 1, bar: 2 }) const fooRef = toRef(state, &#39;foo&#39;) fooRef.value++ console.log(state.foo) // 2 state.foo++ console.log(fooRef.value) // 3 toRefs 将响应式对象转换为普通对象，其中结果对象的每个property都是指向原始对象相应property的ref： const state = reactive({ foo: 1, bar: 2 }) const stateAsRefs = toRefs(state) /* stateAsRefs 的类型: { foo: Ref<number>, bar: Ref<number> } */ // ref 和原始 property 已经“链接”起来了 state.foo++ console.log(stateAsRefs.foo.value) // 2 stateAsRefs.foo.value++ console.log(state.foo) // 3 toRef和toRefs在对一些响应式对象结构展开会很有用，可以有用的时候看看。 watch watch接收两个参数，第一个参数可以是有return的函数，也可以是一个ref, 第二个参数则跟vue2相同的函数，并且watch可以很多个： //一般ref不用这种方式 let count = ref(0); watch( () => count.value, (val, old) => { console.log(old, val); } ); //单个ref推荐 watch(count, (val, old) => { console.log(old, val); }); //监听reactive对象 let state = reactive({ count: 0 }); //函数参数必须具体到某个值，如果是() => state无效，或者加上{ deep: true } watch( () => state.count, (val, old) => { console.log(old, val); } ); //加上{ deep: true } watch( () => state, (val, old) => { console.log(old, val); }, { deep: true } ); //监听整个对象，新旧的值都相同，或者用lodash.cloneDeep进行深拷贝 //state改成() => _.cloneDeep(state) watch(state, (val, old) => { console.log(old.count, val.count); }); 也可以同时监听多个，两个参数分别用数组，个人还是建议单个： const state = reactive({ count: 1 }); const count = ref(0); // 监听一个数组 watch( [() => state.count, count], ([newState, newCount], [oldState, oldCount]) => { console.log("new:", newState, newCount); console.log("old:", oldState, oldCount); } ); 官网一直提到惰性，其实就是是否加immediate: true，加了初始化就会执行。 watchEffect 它"立即执行"传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数： const state = reactive({ count: 1 }); const count = ref(0); watchEffect(() => { if (state.count > 3) { count.value++; } }); watchEffect(() => console.log(count.value)); 至于watch和watchEffect共享停止侦听，清除副作用 (相应地 onInvalidate 会作为回调的第三个参数传入)、 副作用刷新时机和侦听器调试行为后面要仔细研究一下。 computed 从vue2开始，就很多人分不清什么时候用computed什么时候用watch，computed主要是用来声明 有两个及以上的依赖的数据，也就是说一个变量是根据多个数据进行判断的，用computed，单个的用watch。 至于语法的不同就不多说了，vue3的computed常用语法是一个带有return的函数，也可以同时存在多个： let count = ref(0); let page = ref(0); let pg = computed(() => { return count.value + page.value; }); 要注意，computed声明的变量（pg）是不能直接去修改的（只读），跟vue2一样也有get、set函数（可读可写）。 defineProps、defineEmits 在单文件组件中必须使用defineProps和defineEmits API来声明props和emits，可以算是语法糖。 父组件还是跟原来一样传值，子组件接收： //父组件 <template> <div class="home"> <input v-model="msg" /> <HelloWorld :msg="msg" @change="change" /> </div> </template> <script lang="ts" setup> import { ref } from "vue"; import HelloWorld from "@/components/HelloWorld.vue"; let msg = ref("is parent"); const change = (val: string) => { msg.value = val; }; </script> //子组件 <template> <div>{{ msg }}</div> <button @click="change">emit</button> </template> <script lang="ts" setup> import { defineProps, defineEmits } from "vue"; const props = defineProps({ msg: String, }); console.log(props.msg); const emit = defineEmits(["change"]); const change = () => { emit("change", "is son"); }; </script> //设置默认值 defineProps({ msg: { type: Number, default: 100, }, }); template可以直接使用msg，要调用的话就得props.msg。 withDefaults defineProps只能限制类型，没有提供默认值（这边应该是限定用ts的接口才没有默认值）。为了解决这个问题，提供了 withDefaults 编译器宏： type Porps = { msg: string; }; const props = withDefaults(defineProps<Porps>(), { msg: "default", }); withDefaults接收两个参数，第一个参数是defineProps加props字段的泛型，第二个字段是默认值，也可以不设置。 也可以监听props： watch( () => props.msg, (val) => { console.log(val); } ); this.$refs vue2很多情况还是需要用到这个api，vue3中比较特别， 为了获得对模板内元素或组件实例的引用，我们可以像往常一样声明ref， 在渲染上下文中暴露root，并通过ref="root"，将其绑定到 div 作为其 ref。 在虚拟DOM补丁算法中，如果 VNode 的 ref 键对应于渲染上下文中的 ref， 则VNode的相应元素或组件实例将被分配给该ref的值。 这是在虚拟 DOM 挂载/打补丁过程中执行的，因此模板引用只会在初始渲染之后获得赋值。 <button ref="testRef">testRef</button> let testRef = ref(null); onMounted(() => { // DOM 元素将在初始渲染后分配给 ref console.log(testRef.value); // <button>testRef</button> }); nextTick 跟vue2一样的使用： nextTick(() => { console.log(testRef.value); }); 也可以跟官网提供的一样用async的函数await： let testRef = ref(null); const nextTickFn = async () => { await nextTick(); console.log(testRef.value); }; nextTickFn(); defineExpose vue2有时候会用this.$refs调用子组件的函数或者变量， 单文件组件是默认关闭的，所以单文件组件要用defineExpose编译器宏暴露出去： //父组件 <template> <div class="home"> <HelloWorld ref="sonRef" /> </div> </template> <script lang="ts" setup> import { nextTick, ref } from "vue"; import HelloWorld from "@/components/HelloWorld.vue"; let sonRef = ref(); nextTick(() => { sonRef.value.sonFn(); console.log(sonRef.value.sonRef); }); </script> //子组件 let sonRef = ref("is son"); const sonFn = () => { console.log("is son fn"); }; defineExpose({ sonFn, sonRef }); vue2的this.$parent在单文件组件中，自己是实现了，但是官方没有直接给出代码： //父组件 const parentRef = ref("is parent ref"); const parentFn = () => { console.log("is parent fn"); }; defineExpose({ parentRef, parentFn, }); //子组件 let parent = getCurrentInstance(); console.log(parent?.parent?.exposed?.parentRef.value); parent?.parent?.exposed?.parentFn(); 新增组件 teleport 官网介绍了很多，这个组件最大的作用就是可以让组件脱离固定的组件位置，可以挂载在逻辑上最优的位置， 其它使用都跟组件一样，只有位置改变： <teleport to="#teleportDiv"> <HelloWorld /> </teleport> <teleport to="body"> <HelloWorld /> </teleport> 挂载的元素会从上向下解析，第一个to的元素，标签、class、id等。一般使用也不会随便，都会用id元素或者body。 Suspense Suspense是一个试验性的新特性，官方也说生产环境请勿使用。 主要是允许将组件异步处理等待过程提升到组件树中处理。 单文件组件里面顶层await里面提到： async setup() 必须与 Suspense 组合使用，Suspense 目前还是处于实验阶段的特性。 我们打算在将来的某个发布版本中开发完成并提供文档。 所以这边就不给出不是单文件组件的代码实现了。 生命周期 生命周期还是跟原来的一样，只是前面都加上了on，destroy都变成了unmount。 setup会在beforeCreate、created之前执行，取代了beforeCreate、created。 beforeCreate --> beforeCreate created --> setup beforeMount --> onBeforeMount mounted --> onMounted beforeUpdate --> onBeforeUpdate updated --> onUpdated beforeDestroy --> onBeforeUnmount destroyed --> onUnmount 使用： onMounted(() => { console.log("mounted"); }); 试了一下，居然可以写多个。 vue3新增或者删除了哪些API，其实没必要一下子全部去记住，当一些API使用的时候如果发现不生效了， 再去官网查一下，当然，基础的这些API就得记下来。 还是那句话，先学会基础，上手开发，然后慢慢去了解学习不常用的，甚至是源码。 （学习视频分享：vuejs教程、web前端） 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! Déclaration de ce site Web Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn Outils d'IA chauds Undresser.AI Undress Application basée sur l'IA pour créer des photos de nu réalistes AI Clothes Remover Outil d'IA en ligne pour supprimer les vêtements des photos. Undress AI Tool Images de déshabillage gratuites Clothoff.io Dissolvant de vêtements AI Video Face Swap Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit ! Afficher plus Article chaud Assassin's Creed Shadows: Solution d'énigmes de coquille 3 Il y a quelques semaines By DDD Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour 2 Il y a quelques semaines By DDD Où trouver la courte de la grue à atomide atomique 3 Il y a quelques semaines By DDD <🎜>: Dead Rails - Comment relever chaque défi 4 Il y a quelques semaines By DDD Guide de l'atomfall: emplacements des articles, guides de quête et conseils 1 Il y a quelques mois By DDD Afficher plus Outils chauds Bloc-notes++7.3.1 Éditeur de code facile à utiliser et gratuit SublimeText3 version chinoise Version chinoise, très simple à utiliser Envoyer Studio 13.0.1 Puissant environnement de développement intégré PHP Dreamweaver CS6 Outils de développement Web visuel SublimeText3 version Mac Logiciel d'édition de code au niveau de Dieu (SublimeText3) Afficher plus Sujets chauds Où se trouve l'entrée de connexion pour la messagerie Gmail ? 7678 15 Tutoriel CakePHP 1393 52 Tutoriel C# 1207 24 Quel est le format du nom de compte de Steam 91 11 Clé d&amp;amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent 73 19 Afficher plus Related knowledge Comment utiliser tinymce dans le projet vue3 May 19, 2023 pm 08:40 PM tinymce est un plug-in d'éditeur de texte riche entièrement fonctionnel, mais l'introduction de tinymce dans vue n'est pas aussi fluide que les autres plug-ins de texte riche de Vue. tinymce lui-même ne convient pas à Vue, et @tinymce/tinymce-vue doit être introduit, et Il s'agit d'un plug-in de texte riche étranger et n'a pas passé la version chinoise. Vous devez télécharger le package de traduction depuis son site officiel (vous devrez peut-être contourner le pare-feu). 1. Installez les dépendances associées npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. Téléchargez le package chinois 3. Introduisez le skin et le package chinois Créez un nouveau dossier tinymce dans le dossier public du projet et téléchargez le. vue3+vite : Comment résoudre l'erreur lors de l'utilisation de require pour importer dynamiquement des images dans src May 21, 2023 pm 03:16 PM vue3+vite:src utilise require pour importer dynamiquement des images et des rapports d'erreurs et des solutions. vue3+vite importe dynamiquement plusieurs images. Si vue3 est développé à l'aide de TypeScript, il y aura un message d'erreur indiquant que requireisnotdefined ne peut pas être utilisé comme imgUrl. :require(' .../assets/test.png') est importé car TypeScript ne prend pas en charge require, donc l'importation est utilisée. Voici comment le résoudre : utilisez waitimport. Comment actualiser le contenu partiel de la page dans Vue3 May 26, 2023 pm 05:31 PM Pour réaliser un rafraîchissement partiel de la page, il suffit d'implémenter le re-rendu du composant local (dom). Dans Vue, le moyen le plus simple d'obtenir cet effet est d'utiliser la directive v-if. Dans Vue2, en plus d'utiliser l'instruction v-if pour restituer le dom local, nous pouvons également créer un nouveau composant vierge. Lorsque nous devons actualiser la page locale, accéder à cette page de composant vierge, puis y revenir. la garde beforeRouteEnter dans la page d’origine vierge. Comme le montre la figure ci-dessous, comment cliquer sur le bouton d'actualisation dans Vue3.X pour recharger le DOM dans la zone rouge et afficher l'état de chargement correspondant. Puisque la garde dans le composant dans la syntaxe scriptsetup dans Vue3.X n'a ​​que o Comment Vue3 analyse le démarque et implémente la mise en évidence du code May 20, 2023 pm 04:16 PM Pour implémenter le front-end du blog avec Vue, vous devez implémenter l'analyse markdown. S'il y a du code, vous devez implémenter la mise en évidence du code. Il existe de nombreuses bibliothèques d'analyse de démarques pour Vue, telles que markdown-it, vue-markdown-loader, Markdown, vue-markdown, etc. Ces bibliothèques sont toutes très similaires. Marked est utilisé ici et highlight.js est utilisé comme bibliothèque de mise en évidence du code. Les étapes d'implémentation spécifiques sont les suivantes : 1. Installez les bibliothèques dépendantes. Ouvrez la fenêtre de commande sous le projet vue et entrez la commande suivante npminstallmarked-save//marked pour convertir le markdown en htmlnpmins. Comment utiliser vue3+ts+axios+pinia pour obtenir un rafraîchissement insensé May 25, 2023 pm 03:37 PM vue3+ts+axios+pinia réalise un rafraîchissement insensé 1. Téléchargez d'abord aiXos et pinianpmipinia dans le projet--savenpminstallaxios--save2 Encapsuler la requête axios-----Télécharger js-cookienpmiJS-cookie-s//Introduire aixosimporttype{AxiosRequestConfig , AxiosResponse}de"axios";importaxiosfrom'axios';import{ElMess Comment utiliser les composants réutilisables Vue3 May 20, 2023 pm 07:25 PM Préface Que ce soit vue ou réagir, lorsque nous rencontrons plusieurs codes répétés, nous réfléchirons à comment réutiliser ces codes, au lieu de remplir un fichier avec un tas de codes redondants. En fait, Vue et React peuvent être réutilisés en extrayant des composants, mais si vous rencontrez quelques petits fragments de code et que vous ne souhaitez pas extraire un autre fichier, en comparaison, React peut être utilisé dans le même Déclarez le widget correspondant dans le fichier. , ou implémentez-le via la fonction de rendu, telle que : constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return( Comment sélectionner un avatar et le recadrer dans Vue3 May 29, 2023 am 10:22 AM L'effet final est d'installer le composant VueCropper filaddvue-cropper@next. La valeur d'installation ci-dessus est pour Vue3 ou si vous souhaitez utiliser d'autres méthodes de référence, veuillez visiter son adresse officielle npm : tutoriel officiel. Il est également très simple de le référencer et de l'utiliser dans un composant. Il suffit d'introduire le composant correspondant et son fichier de style. Je ne le référence pas globalement ici, mais j'introduis uniquement import{userInfoByRequest}from'../js/api. ' dans mon fichier de composant import{VueCropper}from'vue-cropper&. Comment résoudre le problème selon lequel une fois le projet vue3 empaqueté et publié sur le serveur, la page d'accès s'affiche vide May 17, 2023 am 08:19 AM Une fois le projet vue3 empaqueté et publié sur le serveur, la page d'accès affiche un 1 vide. Le publicPath dans le fichier vue.config.js est traité comme suit : const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/& See all articles Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！ À propos de nous Clause de non-responsabilité Sitemap © php.cn All rights reserved