diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2f35fcbab..63bd0bbaa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -737,12 +737,12 @@ packages: - vue dev: false - /@vueuse/core@10.7.1(vue@3.4.19): - resolution: {integrity: sha512-74mWHlaesJSWGp1ihg76vAnfVq9NTv1YT0SYhAQ6zwFNdBkkP+CKKJmVOEHcdSnLXCXYiL5e7MaewblfiYLP7g==} + /@vueuse/core@10.7.0(vue@3.4.19): + resolution: {integrity: sha512-4EUDESCHtwu44ZWK3Gc/hZUVhVo/ysvdtwocB5vcauSV4B7NiGY5972WnsojB3vRNdxvAt7kzJWE2h9h7C9d5w==} dependencies: '@types/web-bluetooth': 0.0.20 - '@vueuse/metadata': 10.7.1 - '@vueuse/shared': 10.7.1(vue@3.4.19) + '@vueuse/metadata': 10.7.0 + '@vueuse/shared': 10.7.0(vue@3.4.19) vue-demi: 0.14.6(vue@3.4.19) transitivePeerDependencies: - '@vue/composition-api' @@ -761,8 +761,8 @@ packages: - vue dev: false - /@vueuse/integrations@10.7.1(focus-trap@7.5.4)(vue@3.4.19): - resolution: {integrity: sha512-cKo5LEeKVHdBRBtMTOrDPdR0YNtrmN9IBfdcnY2P3m5LHVrsD0xiHUtAH1WKjHQRIErZG6rJUa6GA4tWZt89Og==} + /@vueuse/integrations@10.7.0(focus-trap@7.5.4)(vue@3.4.19): + resolution: {integrity: sha512-rxiMYgS+91n93qXpHZF9NbHhppWY6IJyVTDxt4acyChL0zZVx7P8FAAfpF1qVK8e4wfjerhpEiMJ0IZ1GWUZ2A==} peerDependencies: async-validator: '*' axios: '*' @@ -802,8 +802,8 @@ packages: universal-cookie: optional: true dependencies: - '@vueuse/core': 10.7.1(vue@3.4.19) - '@vueuse/shared': 10.7.1(vue@3.4.19) + '@vueuse/core': 10.7.0(vue@3.4.19) + '@vueuse/shared': 10.7.0(vue@3.4.19) focus-trap: 7.5.4 vue-demi: 0.14.6(vue@3.4.19) transitivePeerDependencies: @@ -811,16 +811,16 @@ packages: - vue dev: false - /@vueuse/metadata@10.7.1: - resolution: {integrity: sha512-jX8MbX5UX067DYVsbtrmKn6eG6KMcXxLRLlurGkZku5ZYT3vxgBjui2zajvUZ18QLIjrgBkFRsu7CqTAg18QFw==} + /@vueuse/metadata@10.7.0: + resolution: {integrity: sha512-GlaH7tKP2iBCZ3bHNZ6b0cl9g0CJK8lttkBNUX156gWvNYhTKEtbweWLm9rxCPIiwzYcr/5xML6T8ZUEt+DkvA==} dev: false /@vueuse/metadata@9.13.0: resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==} dev: false - /@vueuse/shared@10.7.1(vue@3.4.19): - resolution: {integrity: sha512-v0jbRR31LSgRY/C5i5X279A/WQjD6/JsMzGa+eqt658oJ75IvQXAeONmwvEMrvJQKnRElq/frzBR7fhmWY5uLw==} + /@vueuse/shared@10.7.0(vue@3.4.19): + resolution: {integrity: sha512-kc00uV6CiaTdc3i1CDC4a3lBxzaBE9AgYNtFN87B5OOscqeWElj/uza8qVDmk7/U8JbqoONLbtqiLJ5LGRuqlw==} dependencies: vue-demi: 0.14.6(vue@3.4.19) transitivePeerDependencies: @@ -1112,8 +1112,8 @@ packages: '@types/markdown-it': 13.0.7 '@vitejs/plugin-vue': 5.0.0-beta.1(vite@5.0.10)(vue@3.4.19) '@vue/devtools-api': 6.5.1 - '@vueuse/core': 10.7.1(vue@3.4.19) - '@vueuse/integrations': 10.7.1(focus-trap@7.5.4)(vue@3.4.19) + '@vueuse/core': 10.7.0(vue@3.4.19) + '@vueuse/integrations': 10.7.0(focus-trap@7.5.4)(vue@3.4.19) focus-trap: 7.5.4 mark.js: 8.11.1 minisearch: 6.3.0 diff --git a/src/about/team/members-core.json b/src/about/team/members-core.json index 79da0db29..54253b619 100644 --- a/src/about/team/members-core.json +++ b/src/about/team/members-core.json @@ -125,6 +125,10 @@ ], "location": "Singapour", "languages": ["Chinois", "Anglais"], + "website": { + "label": "jinjiang.me", + "url": "http://jinjiang.me" + }, "socials": { "github": "jinjiang", "twitter": "zhaojinjiang" diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md index 269c6ae92..1748b1ac4 100644 --- a/src/guide/essentials/watchers.md +++ b/src/guide/essentials/watchers.md @@ -371,7 +371,7 @@ Comme pour les mises à jour de composants, les rappels de l'observateur créés Par défaut, le rappel d'un observateur est appelé **après** les mises à jour du composant parent (le cas échéant), et **avant** les mises à jour du DOM du composant propriétaire. Cela signifie que si vous tentez d'accéder au DOM du composant propriétaire à l'intérieur d'un callback de l'observateur, le DOM sera dans un état de pré-mise à jour. -### Publier des Observateurs {#post-watchers} +### Observateurs à posterio {#post-watchers} Si vous voulez accéder au DOM **après** que Vue l'ait mis à jour, vous devez spécifier l'option `flush: 'post'` : @@ -415,7 +415,7 @@ watchPostEffect(() => { -### Observateurs de synchronisation {#sync-watchers} +### Observateurs synchrones {#sync-watchers} Il est également possible de créer un observateur qui se déclenche de manière synchrone, avant toute mise à jour gérée par Vue. diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md index 3e2a424c3..33eeb5d94 100644 --- a/src/guide/extras/reactivity-in-depth.md +++ b/src/guide/extras/reactivity-in-depth.md @@ -405,7 +405,7 @@ export function useMachine(options) { De nombreux autres frameworks ont introduit des primitives de réactivité similaires aux refs de la Composition API de Vue, sous le terme "Signals" : - [Signals de Solid](https://www.solidjs.com/docs/latest/api#createsignal) -- [Signals d'Angular](https://github.com/angular/angular/discussions/49090) +- [Signals d'Angular](https://angular.io/guide/signals) - [Signals de Preact](https://preactjs.com/guide/v10/signals/) - [Signals de Qwik](https://qwik.builder.io/docs/components/state/#usesignal) @@ -456,18 +456,12 @@ const count = signal(0) count() // accède à la valeur count.set(1) // assigne la nouvelle valeur count.update((v) => v + 1) // met à jour en fonction de la valeur précédente - -// mute les objets profonds ayant la même identité -const state = signal({ count: 0 }) -state.mutate((o) => { - o.count++ -}) ``` Une fois de plus, nous pouvons facilement répliquer l'API dans Vue : ```js -import { shallowRef, triggerRef } from 'vue' +import { shallowRef } from 'vue' export function signal(initialValue) { const r = shallowRef(initialValue) @@ -478,15 +472,11 @@ export function signal(initialValue) { s.update = (updater) => { r.value = updater(r.value) } - s.mutate = (mutator) => { - mutator(r.value) - triggerRef(r) - } return s } ``` -[Essayer en ligne](https://play.vuejs.org/#eNp9UslOwzAQ/ZVRLiRQEsqxpBUIvoADp0goTd3U4DiWl4AU5d8ZL3E3iZtn5r1Z3vOYvAiRD4Ykq6RUjaRCgyLaiE3FaSd6qWEERVteswU0fSeMJjuYYC/7Dm7youatYbW895D8S91UvOJNz5VGuOEa1oGePmRzYdebLSNYmRumaQbrjSfg8xYeEVsWfh/cBANNOsFqTTACKA/LzavrTtUKxjEyp6kssDZj3vygAPJjL1Bbo3XP4blhtPleV4nrlBuxw1npYLca4A6WWZU4PADljSQd4drRC8//rxfKaW+f+ZJg4oJbFvG8ZJFcaYreHL041Iz1P+9kvwAtadsS6d7Rm1rB55VRaLAzhvy6NnvDG01x1WAN5VTTmn3UzJAMRrudd0pa++LEc9wRpRDlHZT5YGu2pOzhWHAJWxvnakxOHufFxqx/4MxzcEinIYP+eV5ntOe5Rx94IYjopxOZUhnIEr+4xPMrjuG1LPFftkTj5DNJGhwYBZ4BJz3DV56FmJLpD1DrKXU=) +[Essayer en ligne](https://play.vuejs.org/#eNp9Ul1v0zAU/SuWX9ZCSRh7m9IKGHuAB0AD8WQJZclt6s2xLX+ESlH+O9d2krbr1Df7nnPu17k9/aR11nmgt7SwleHaEQvO6w2TvNXKONITyxtZihWpVKu9g5oMZGtUS66yvJSNF6V5lyjZk71ikslKSeuQ7qUj61G+eL+cgFr5RwGITAkXiyVZb5IAn2/IB+QWeeoHO8GPg1aL0gH+CCl215u7mJ3bW9L3s3IYihyxifMlFRpJqewL1qN3TknysRK8el4zGjNlXtdYa9GFrjryllwvGY18QrisDLQgXZTnSX8pF64zzD7pDWDghbbI5/Hoip7tFL05eLErhVD/HmB75Edpyd8zc9DUaAbso3TrZeU4tjfawSV3vBR/SuFhSfrQUXLHBMvmKqe8A8siK7lmsi5gAbJhWARiIGD9hM7BIfHSgjGaHljzlDyGF2MEPQs6g5dpcAIm8Xs+2XxODTgUn0xVYdJ5RxPhKOd4gdMsA/rgLEq3vEEHlEQPYrbgaqu5APNDh6KWUTyuZC2jcWvfYswZD6spXu2gen4l/mT3Icboz3AWpgNGZ8yVBttM8P2v77DH9wy2qvYC2RfAB7BK+NBjon32ssa2j3ix26/xsrhsftv7vQNpp6FCo4E5RD6jeE93F0Y/tHuT3URd2OLwHyXleRY=) Par rapport aux références Vue, Solid et le style d'API basé sur les accesseurs d'Angular offrent quelques compromis intéressants lorsqu'ils sont utilisés dans des composants Vue : diff --git a/src/guide/extras/ways-of-using-vue.md b/src/guide/extras/ways-of-using-vue.md index e5a1edb42..af99cd9ad 100644 --- a/src/guide/extras/ways-of-using-vue.md +++ b/src/guide/extras/ways-of-using-vue.md @@ -53,8 +53,8 @@ L'équipe Vue maintient également un générateur de site statique appelé [Vit Bien que Vue soit principalement conçu pour construire des applications Web, il n'est en aucun cas limité au navigateur. Vous pouvez : -- Construire des applications de bureau avec [Electron](https://www.electronjs.org/) ou [Tauri](https://tauri.studio/) +- Construire des applications de bureau avec [Electron](https://www.electronjs.org/) ou [Tauri](https://tauri.app) - Construire des applications mobiles avec [Ionic Vue](https://ionicframework.com/docs/vue/overview) - Construire des applications de bureau et mobile à partir du même code avec [Quasar](https://quasar.dev/) - Créez des expériences 3D WebGL avec [TresJS](https://tresjs.org/) -- Utiliser l'API de [rendu personnalisé](/api/custom-renderer) de Vue pour construire des rendus personnalisés comme ceux du [terminal](https://github.com/vue-terminal/vue-termui) ! \ No newline at end of file +- Utiliser l'API de [rendu personnalisé](/api/custom-renderer) de Vue pour construire des rendus personnalisés comme ceux du [terminal](https://github.com/vue-terminal/vue-termui) ! diff --git a/src/tutorial/src/step-1/description.md b/src/tutorial/src/step-1/description.md index 1985e5143..b6b31972a 100644 --- a/src/tutorial/src/step-1/description.md +++ b/src/tutorial/src/step-1/description.md @@ -48,6 +48,33 @@ Voir la page [Note sur la compilation des templates dans le navigateur](/guide/s +
+ +:::tip +If you're about to use HTML-mode without a build step in your own applications, make sure you either change imports to: + +```js +import { ... } from 'vue/dist/vue.esm-bundler.js' +``` + +inside your scripts or configure your build tool to resolve `vue` accordingly. Sample config for [Vite](https://vitejs.dev/): + +```js +// vite.config.js +export default { + resolve: { + alias: { + vue: 'vue/dist/vue.esm-bundler.js' + } + } +} +``` + +See the respective [section in Tooling guide](/guide/scaling-up/tooling.html#note-on-in-browser-template-compilation) for more information. +::: + +
+ Prêts? Cliquez sur "Suivant" pour commencer. diff --git a/vercel.json b/vercel.json index ee8c0c5f5..5b9605e5e 100644 --- a/vercel.json +++ b/vercel.json @@ -26,4 +26,4 @@ "destination": "https://v2.fr.vuejs.org/v2/:path*.html" } ] -} \ No newline at end of file +}