渐进式 JavaScript 框架 Vue 3 备忘清单的快速参考列表，包含常用 API 和示例。
Vue 是一套用于构建用户界面的渐进式框架
<div>{{ count }}</div>
+<div>{{ state.count }}</div>
-export default {
- data() {
+import { defineComponent, reactive } from 'vue';
+
+// `defineComponent`用于IDE推导类型
+export default defineComponent({
+ // `setup` 是一个专门用于组合式 API 的特殊钩子函数
+ setup() {
+ const state = reactive({ count: 0 });
+
+ // 暴露 state 到模板
return {
- count: 0
- }
+ state
+ };
},
-}
+});
<button @click="increment">
- {{ count }}
+ {{ state.count }}
</button>
export default {
- data() {
- return {
- count: 0
- }
- },
- methods: {
- increment() {
- this.count++
+import { defineComponent, reactive } from 'vue';
+
+export default defineComponent({
+ setup() {
+ const state = reactive({ count: 0 });
+
+ function increment() {
+ state.count++;
}
- }
-}
+
+ // 不要忘记同时暴露 increment 函数
+ return {
+ state,
+ increment
+ };
+ },
+})
+
+<script setup> setup语法糖<script setup>
+// setup语法糖用于简化代码，尤其是当需要暴露的状态和方法越来越多时
+import { reactive } from 'vue';
+
+const state = reactive({ count: 0 })
+
+function increment() {
+ state.count++
+}
+</script>
+
+<template>
+ <button @click="increment">
+ {{ state.count }}
+ </button>
+</template>
+ref() 定义响应式变量// `reactive`只能用于对象、数组和 Map、Set 这样的集合类型，对 string、number 和 boolean 这样的原始类型则需要使用`ref`
+import { ref } from 'vue';
+
+const count = ref(0);
+
+console.log(count); // { value: 0 }
+console.log(count.value); // 0
+
+count.value++;
+console.log(count.value); // 1
+
+const objectRef = ref({ count: 0 });
+
+// 这是响应式的替换
+objectRef.value = { count: 1 };
+
+const obj = {
+ foo: ref(1),
+ bar: ref(2)
+};
+
+// 该函数接收一个 ref
+// 需要通过 .value 取值
+// 但它会保持响应性
+callSomeFunction(obj.foo);
+
+// 仍然是响应式的
+const { foo, bar } = obj;
+<!-- PS: 在html模板中不需要带.value就可以使用 -->
+<script setup>
+import { ref } from 'vue';
+
+const count = ref(0);
+</script>
+
+<template>
+ <div>
+ {{ count }}
+ </div>
+</template>
import { debounce } from 'lodash-es'
-export default {
- created() {
+import { reactive, defineComponent, onUnmounted } from 'vue';
+import { debounce } from 'lodash-es';
+
+export default defineComponent({
+ setup() {
// 每个实例都有了自己的预置防抖的处理函数
- this.debouncedClick = debounce(this.click, 500)
- },
- unmounted() {
- // 最好是在组件卸载时
- // 清除掉防抖计时器
- this.debouncedClick.cancel()
- },
- methods: {
- click() {
+ const debouncedClick = debounce(click, 500);
+
+ function click() {
// ... 对点击的响应 ...
}
- }
-}
+
+ // 最好是在组件卸载时
+ // 清除掉防抖计时器
+ onUnmounted(() => {
+ debouncedClick.cancel();
+ });
+ },
+});