当前位置：首页 > news >正文

Vue3从入门到精通

news 2025/7/18 11:54:06

一、Vue3简介

1.Vue是什么

Vue是一套用于构建用户界面的渐进式的JavaScript框架。所谓渐进式就是可以自底向上逐层的应用。

2.Vue的特点

1.采用组件化模式，提高代码复用率、且让代码更好维护。

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。

3.使用虚拟DOM+优秀的Diff 算法，尽量复用DOM节点,。

3.Vue的API风格

Vue的组件可以按两种不同的风格书写：选项式API（可以理解成Vue2版本）和组合式API（可以理解成Vue3版本）。
大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格。

选项式API（Options API）
使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如data、methods和mounted。选项所定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

<template><button @click="increment">Count is: {{ count }}</button>
</template><script>
export default {data() {return {count: 0}},methods: {increment() {this.count++}},mounted() {console.log(`The initial count is ${this.count}.`)}
}
</script>

组合式API（CompositionAPl）
通过组合式API，我们可以使用导入的API函数来描述组件逻辑。

<template><button @click="increment">Count is: {{ count }}</button>
</template><script setup>
import { ref, onMounted } from 'vue'const count = ref(0)function increment() {count.value++
}onMounted(() => {console.log(`The initial count is ${count.value}.`)
})
</script>