vue3是vue框架的最新版本，与vue2相比，在性能、api、typescript支持等方面都有很大的改进。因此，vue3已经成为了前端开发中的热门话题。作为前端开发人员，如果你想掌握vue3的开发技能，那么你需要对其中的函数进行了解和掌握。本文将介绍vue3的常用函数，让你能够快速上手vue3开发。
createApp
createApp()是在Vue3.0中引入的新函数。该函数的作用是创建Vue应用程序实例，并返回该实例。createApp()函数可以接收一个组件、模板和配置对象，用来定义Vue应用程序。
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');mount
mount()函数用于将应用程序实例挂载到DOM元素上。在Vue3中，应用程序实例可以使用mount()方法来绑定到一个元素上。当DOM元素被挂载到页面上时，应用程序就可以开始渲染。
app.mount('#app');可以看到，mount()函数接收一个CSS选择器或者一个DOM元素作为参数，该参数定义应用程序要绑定的元素。
props
props函数用于传递组件之间的数据。在Vue3中，组件的属性变得更加清晰和明确。开发者可以使用props选项来指定组件的属性和它们的类型。下面是一个使用props选项的例子：
立即学习“前端免费学习笔记（深入）”；
export default {
props: {
name: String,
age: Number
}
}可以看到，我们在组件选项中的props值中定义了一个name和age属性。这意味着当我们使用此组件时，我们需要通过属性传递name和age的值。
setup
setup()函数是一种新的组件API，用于定义组件的行为。在Vue3中，setup()函数与Vue2中的data()函数类似，但它提供了更多的灵活性，可以使用新的语法和Vue3的响应式系统来实现更好的性能。下面是一个简单的例子：
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
count: 0
});
function increment() {
state.count++;
}
return {
state,
increment
}
}
}可以看到，我们在setup()函数中使用了Vue3的reactive()函数，它可以使state对象成为响应式对象。通过这种方式，我们可以对state中的属性进行修改，Vue会自动更新相关的视图。除了响应式之外，我们还可以在setup()函数中定义其他函数和变量，并将它们返回给父组件。
watch
watch()函数用于监听组件数据的变化。它可以监听一些特定的数据，当这些数据发生改变时，会执行相应的函数。watch()函数可以接收两个参数，第一个参数是我们要监听的数据，第二个参数是当这些数据发生变化时要执行的函数。下面是一个使用watch()函数的例子：
import { watch } from 'vue';
export default {
setup() {
const state = reactive({
count: 0
});
watch(() => state.count, (newVal, oldVal) => {
console.log(`New Value: ${newVal}, Old Value: ${oldVal}`);
});
return {
state
}
}
}这里我们使用Vue3的watch函数来监听state.count的变化。当state.count发生变化时，会执行传递给watch()函数的回调函数，并输出新旧值的日志信息。
computed
computed函数是计算属性的新API。在Vue3中，我们可以使用computed函数来定义计算属性。计算属性是基于依赖的响应式属性，当其依赖的数据发生变化时，它会自动重新计算。下面是一个使用computed函数的例子：
import { computed } from 'vue';
export default {
setup() {
const state = reactive({
height: 180,
weight: 75
});
const bmi = computed(() => state.weight / (state.height / 100) ** 2);
return {
state,
bmi
}
}
}这里我们使用Vue3的computed函数来定义一个计算属性bmi，并在返回的结果中返回给父组件。通过这种方式，我们可以将计算属性的计算逻辑转移到组件外部。当state.height和state.weight的值发生变化时，我们不需要手动重新计算bmi的值，Vue会自动帮我们完成这个任务。
ref
ref()函数是Vue3中的新API，用于创建一个响应式引用。在Vue3中，使用ref()函数可以将任何值包装成一个响应式值。下面是一个使用ref()函数的例子：
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
return {
count
}
}
}这里我们将count变量包装成了一个响应式引用，这意味着当我们修改count的值时，Vue会自动更新相关的视图。
toRefs
toRefs()函数是Vue3中的另一个新API，用于创建一个响应式引用对象。在Vue3中，当我们使用ref()函数创建一个响应式引用时，我们无法直接通过解构获取其值。这时，我们可以使用Vue3的toRefs()函数，将响应式引用对象转换成一个对象，以便我们可以通过解构直接获取它的值。下面是一个使用toRefs()函数的例子：
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
name: 'John',
age: 25
});
return {
...toRefs(state)
}
}
}可以看到，我们使用Vue3的toRefs()函数将响应式对象state转换成了一个响应式引用对象，然后我们使用对象的解构语法来提取state的属性。
总结：
以上就是Vue3.0常用的函数，这些函数对于Vue3开发非常重要。学会这些函数，可以让你更好地了解Vue3的开发方式，更快地掌握Vue3的开发技能。希望本文对你学习Vue3有所帮助。
