1. ref 和 reactive
首先，让我们从 Vue3 最基础也是最常用的两个方法开始：ref 和 reactive。它们是响应式基础。
ref
ref 用于定义一个响应式的数据对象。它适用于单个基本类型或对象的场景。
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">
{{ count }}
</button>
</template>为什么要使用 ref？
你可能会好奇：为什么我们需要使用带有 .value 的 ref，而不是普通的变量？为了解释这一点，我们需要简单地讨论一下 Vue 的响应式系统是如何工作的。
当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。
在标准的 JavaScript 中，检测普通变量的访问或修改是行不通的。然而，我们可以通过 getter 和 setter 方法来拦截对象属性的 get 和 set 操作。
该 .value 属性给予了 Vue 一个机会来检测 ref 何时被访问或修改。在其内部，Vue 在它的 getter 中执行追踪，在它的 setter 中执行触发。从概念上讲，你可以将 ref 看作是一个像这样的对象：
// 伪代码，不是真正的实现
const myRef = {
_value: 0,
get value() {
track()
return this._value
},
set value(newValue) {
this._value = newValue
trigger()
}
}另一个 ref 的好处是，与普通变量不同，你可以将 ref 传递给函数，同时保留对最新值和响应式连接的访问。当将复杂的逻辑重构为可重用的代码时，这将非常有用。
reactive
reactive 用于定义一个响应式的复杂对象。适用于包含多个属性的对象。
<template>
<button @click="state.count++">
{{ state.count }}
</button>
</template>
<script setup>
import { reactive } from 'vue';
const state = reactive({ count: 0 })
</script>2. toRefs
当我们使用 reactive 创建了一个复杂对象后，有时候需要将其解构为多个响应式的引用，这时候 toRefs 就派上用场了。
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
name: 'Vue3'
});
return {
...toRefs(state)
};
}
};3. watch 和 watchEffect
watch
watch 用于监听特定数据的变化并执行相应的回调函数。它可以用来监控一个或多个响应式数据。
import { ref, watch } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`Count changed from ${oldVal} to ${newVal}`);
});
return {
count
};
}
};watchEffect
watchEffect 更为自动化，它会立即执行一次并响应任何依赖的变化。
import { ref, watchEffect } from 'vue';
export default {
setup() {
const count = ref(0);
watchEffect(() => {
console.log(`Count is now ${count.value}`);
});
return {
count
};
}
};4. computed
computed 用于定义计算属性，它会根据依赖的变化自动更新。
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
return {
count,
doubleCount
};
}
};5. provide 和 inject
provide
provide 用于向下传递数据，通常在父组件中使用。
import { provide } from 'vue';
export default {
setup() {
provide('message', 'Hello from parent');
return {};
}
};inject
inject 用于在子组件中接收数据。
import { inject } from 'vue';
export default {
setup() {
const message = inject('message');
return {
message
};
}
};6. shallowRef 和 shallowReactive
shallowRef
shallowRef 仅对对象的第一层进行响应式处理。
import { shallowRef } from 'vue';
export default {
setup() {
const state = shallowRef({
count: 0
});
return {
state
};
}
};shallowReactive
shallowReactive 也是仅对对象的第一层进行响应式处理。
import { shallowReactive } from 'vue';
export default {
setup() {
const state = shallowReactive({
count: 0
});
return {
state
};
}
};7. customRef
customRef 允许你自定义对某个响应式对象的追踪逻辑。
import { customRef } from 'vue';
function useDebouncedRef(value, delay = 200) {
let timeout;
return customRef((track, trigger) => {
return {
get() {
track();
return value;
},
set(newValue) {
clearTimeout(timeout);
timeout = setTimeout(() => {
value = newValue;
trigger();
}, delay);
}
};
});
}
export default {
setup() {
const debounced = useDebouncedRef(0);
return {
debounced
};
}
};8. markRaw 和 isRef
markRaw
markRaw 用于标记一个对象永远不会成为响应式的。
import { markRaw } from 'vue';
const rawObject = markRaw({
count: 0
});
export default {
setup() {
return {
rawObject
};
}
};isRef
isRef 用于检查一个对象是否为 ref。
import { ref, isRef } from 'vue';
export default {
setup() {
const count = ref(0);
console.log(isRef(count)); // true
return {
count
};
}
};9. getCurrentInstance
getCurrentInstance 可以用来获取组件实例，对于调试非常有用。
import { getCurrentInstance, onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
const instance = getCurrentInstance();
console.log(instance);
});
return {};
}
};10. defineProps 和 defineEmits
defineProps
defineProps 用于在组合式 API 中定义接收的属性。
import { defineProps } from 'vue';
export default {
setup() {
const props = defineProps({
message: String
});
return {
props
};
}
};defineEmits
defineEmits 用于在组合式 API 中定义发出的事件。
import { defineEmits } from 'vue';
export default {
setup() {
const emit = defineEmits(['update']);
const updateMessage = () => {
emit('update', 'New message');
};
return {
updateMessage
};
}
};11. teleport
teleport 允许你将内容渲染到指定的 DOM 元素中。
<template>
<teleport to="#teleport-target">
<p>This will be teleported to another part of the DOM.</p>
</teleport>
</template>
<script>
export default {
setup() {
return {};
}
};
</script>12. Suspense
Suspense 用于处理异步组件的加载状态。
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<p>Loading...</p>
</template>
</Suspense>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
);
export default {
components: {
AsyncComponent
},
setup() {
return {};
}
};
</script>13. v-model 的修饰符支持
Vue3 中 v-model 支持多个修饰符，比如 lazy, number, 和 trim。
<template>
<input v-model.lazy="text" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const text = ref('');
return {
text
};
}
};
</script>14. nextTick 函数
nextTick 用于在下次 DOM 更新循环结束后执行回调。
import { ref, nextTick } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
nextTick(() => {
console.log('DOM updated');
});
};
return {
count,
increment
};
}
};15. defineAsyncComponent
defineAsyncComponent 用于定义异步组件。
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
);
export default {
components: {
AsyncComponent
},
setup() {
return {};
}
};16. defineCustomElement
defineCustomElement` 用于定义自定义元素。
import { defineCustomElement } from 'vue';
const MyCustomElement = defineCustomElement({
props: {
message: String
},
template: `<p>{{ message }}</p>`
});
customElements.define('my-custom-element', MyCustomElement);17. teleport 和 Fragment 的简写
在 Vue3 中，teleport 和 Fragment 的简写方式更加简洁。
<template>
<Teleport to="#teleport-target">
<p>Teleported content</p>
</Teleport>
</template>
<script>
export default {
setup() {
return {};
}
};
</script>总结
通过这篇文章，够帮助你在开发中更加得心应手。
标签：count,vue,const,高阶,用法,vue3,return,import,ref From： https://blog.csdn.net/lbking666666/article/details/140035412