Wie verwende ich Syntaxzucker in
Vue? Der folgende Artikel führt Sie durch Syntax Sugar und stellt Ihnen die Verwendung von Vue3.2 Syntax Sugar vor. Ich hoffe, er wird Ihnen hilfreich sein!
In derVue2-Ära werden verschiedene in der Komponente definierte Variablen, Methoden, berechnete Eigenschaften usw. indatagespeichert. Methoden,berechnetenund anderen Optionen ist der auf diese Weise geschriebene Code für die spätere Referenzierung nicht geeignet. Um eine Geschäftslogik zu finden, müssen Sie hin und her wechseln verschiedene Optionen. Dievue3.0-kombinierte API-Funktionsetupwurde gestartet, um dieses Problem zu lösen. Sie macht unseren logischen Fokus fokussierter und die Syntax rationalisierter, aber wenn wir die Syntax von vue3.0 besteht darin, dass Sie beim Erstellen von Komponenten immer die außerhalb definierten Methodenvariablen zurückgeben müssen, bevor sie inverwendet werden können, was etwas problematischer ist. vue3.2Das Aufkommen von Syntax Sugar und einigen neuen APIs vereinfacht unseren Code weiter. [Teilen von Lernvideos:vue Video-TutorialVue2时期，组件里定义的各类变量、方法、计算属性等是分别存放到data、methods、computed等选项里，这样编写的代码不便于后期的查阅，查找一个业务逻辑需要在各个选项来回切换。vue3.0组合式APIsetup函数的推出就是为了解决这个问题，它让我们的逻辑关注点更加集中，语法也更加精简，但是当我们在使用vue3.0的语法就构建组件的时候，总是需要把外面定义的方法变量必须要return出去才能在，比较麻烦一些.vue3.2语法糖的出现以及一些新增的API，让我们的代码进一步简化。【学习视频分享：vue视频教程、web前端视频】
语法糖（英语：Syntactic sugar）是由英国计算机科学家彼得·兰丁发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。语法糖让程序更加简洁，有更高的可读性。
Vue3.2语法糖来看下vue3.0与vue3.2的单文件组件（SFC，即.vue 文件）的结构对比
vue3.0组件vue3.2组件对比vue3.0与vue3.2版本的组件模板，最主要的变化是3.2中没有了setup函数，而是把它放在了script标签中。
我们定义的属性和方法也不用在return中返回，直接就可以用在模板语法中 ...
这些是直观的变化，接下来我们学习具体的用法。
vue3.0中使用组件，需要使用 components 选项来显式注册：
vue3.2
Nach dem Login kopieren
在vue3.0中，prop可以使用props选项来声明
vue3.2组件中，props可以使用defineProps()宏来声明
注意事项：所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递，这意味着你不应该在子组件中去更改一个 prop。
我们一般使用计算属性来描述依赖响应式状态的复杂逻辑。说白了就是这个计算属性的值依赖于其他响应式属性的值，依赖的属性发生变化，那么这个计算属性的值就会进行重新计算。
当调用fullName.value = 'John Doe'时，setter会被调用，而firstName和lastName会被更新，在vue3.2中我们可以直接在,web front-end video
Vue3.2Syntaxzuckervue3.0undvue3.2
vue3.0Komponentevue3.2Komponentevue3.0undvue3.2besteht die wichtigste Änderung darin, dass es kein < gibt code>setup in 3.2Funktion, aber fügen Sie sie in das Skript-Tag ein.vue3.0Bei der Verwendung von Komponenten müssen Sie die Komponentenoption verwenden, um sich explizit zu registrieren:
vue3.2< ;script setup> ;In der Einzeldateikomponente kann die importierte Komponente direkt in der Vorlage verwendet werden. Die Komponente wird automatisch registriert und es ist nicht erforderlich, den Namen der aktuellen Komponente anzugeben basierend auf dem Dateinamen, was bedeutet, dass das Namensattribut nicht geschrieben werden muss.
vue3.0< /code>, propkann die Optionpropsverwenden, um
Nach dem Login kopieren
Nach dem Login kopieren
vue3.2Komponente,propsSie zu deklarieren Sie können das MakrodefineProps()verwenden, um
Nach dem Login kopieren
Nach dem Login kopieren
zu deklarieren. Hinweis: Alle Requisiten folgen dem Prinzip der Einwegbindung. Requisiten ändern sich aufgrund von Aktualisierungen der übergeordneten Komponente, und neue werden natürlich auch geändert Der hinzugefügte Status fließt nach unten zu untergeordneten Komponenten und nicht rückwärts, was bedeutet, dass Sie eine Requisite in einer untergeordneten Komponente nicht ändern sollten.
3. Berechnete Eigenschaften
Wir verwenden im Allgemeinen berechnete Eigenschaften um komplexe Logik zu beschreiben, die auf dem reaktiven Zustand beruht. Um es ganz klar auszudrücken: Der Wert dieser berechneten Eigenschaft hängt vom Wert anderer responsiver Eigenschaften ab. Wenn sich die abhängigen Eigenschaften ändern, wird der Wert dieser berechneten Eigenschaft neu berechnet.
子组件 父组件
Nach dem Login kopieren
Nach dem Login kopieren
fullName.value = 'John Doe'werdensettersowiefirstNameundlastName code> wird aktualisiert. In vue3.2können wir es direkt im
- 不要在计算函数中做异步请求或者更改 DOM！
- 一个计算属性仅会在其响应式依赖更新时才重新计算，如果他依赖的是个非响应式的依赖，及时其值发生变化，计算属性也不会更新。
- 相比于方法而言，计算属性值会基于其响应式依赖被缓存，一个计算属性仅会在其响应式依赖更新时才重新计算
在组合式API中，我们可以使用watch函数在每次响应式状态发生变化时触发回调函数,watch的第一个参数可以是不同形式的“数据源”：它可以是一个ref(包括计算属性)、一个响应式对象、一个getter函数、或多个数据源组成的数组：watch()是懒执行的：仅当数据源变化时，才会执行回调，例如：
这里监听
props.itemList.length，当传入的itemList数量发生变化时，后面的回调方法会被调用。当然wacth()还有第三个可选参数：否开启深监听(deep), 如果这里这样写:Nach dem Login kopierenNach dem Login kopieren当传入的
itemList数量发生改变时，回调函数不会触发，正确的写法是加上其第三个参数deep:true
watch也可以同时监听多个属性：
watchEffect()与watch()的懒执行不同的是，watchEffect()会立即执行一遍回调函数，如果这时函数产生了副作用，Vue会自动追踪副作用的依赖关系，自动分析出响应源。上面的例子可以重写为：
这个例子中，回调会立即执行。在执行期间，它会自动追踪props.itemList.length作为依赖（和计算属性的行为类似）。每当传入的itemList.length变化时，回调会再次执行。
如果要清除watchEffect()的的监听，只需要显示的调用watchEffect()的返回函数就可以了，例如：
watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。我们能更加精确地控制回调函数的触发时机。 watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。
vue3.0中如果我们的子组件触发父组件的方法，我们的做法:
子组件 父组件
vue3.2语法糖中,子组件要触发的事件需要显式地通过defineEmits()宏来声明
子组件 父组件
vue3.0中如果父组件触发子组件的方法或是属性，直接在return函数中返回就可以，数据都是默认隐式暴露给父组件的。
父组件中通过ref获取到子组件，并对子组件暴露的方法进行访问
父组件
vue3.2语法中，父组件的调用方式相同，子组件通过defineExpose()将方法或是属性暴露出去
子组件 父组件
在vue3.0与vue3.2中创建Vuex没有区别，只不过在模板中使用Vuex的store有细微差别。
import { createStore } from 'vuex'; import { ADD_ITEM_LIST, REDUCE_ITEM_LIST, CHANGE_ITEM_LIST_ASYNC } from './constants'; export default createStore({ state: { itemList: [ { text: 'Learn JavaScript', done: true }, { text: 'Learn Vue', done: false }, { text: 'Build something awesome', done: false }, ], }, getters: { doneItemList: (state) => state.itemList.filter((todo) => todo.done), }, mutations: { // 使用ES2015风格的计算属性命名功能 来使用一个常量作为函数名 [ADD_ITEM_LIST](state, item) { console.log('增加数据', item); state.itemList.push(item); }, [REDUCE_ITEM_LIST](state) { console.log('减少数据'); state.itemList.pop(); }, }, actions: { [CHANGE_ITEM_LIST_ASYNC]({ commit, state }, todoItem) { /// 模拟网络请求 setTimeout(() => { commit(ADD_ITEM_LIST, todoItem); console.log('state===', state); }, 1000); }, }, modules: { }, });
在vue3.0中我们一般在return中对store.state进行解构,然后可以直接在中使用state中的值
- {{ item.text }}
vue3.2中没有了return，需要我们显示的获取要使用的stare的值
- {{ item.text }}
Nach dem Login kopieren
触发callChangeColorHandel函数，在