Vue3新特征

创建一个vue项目

默认端口号：5173

支持组合式API

ref工具：

        从vue工具库中引用ref工具，用于存放数据 ref可以实现工具绑定

点击按钮实现count自加1

vue3实现

scoped

        在 Vue.js 中，<style scoped> 允许你只为当前组件的模板定义 CSS 样式，而不会影响到其他组件的样式。在一个 Vue 组件的 <style> 标签中添加了 scoped 属性后，Vue 会通过一种机制（通常是 CSS 的 ::v-deep、/deep/ 或 >>> 伪类，但在 scoped 样式内部自动处理）来修改组件中的选择器，以确保这些样式只应用于当前组件的根元素下的元素，从而避免了全局样式冲突。

vue2实现

setup()

        程序的入口

reactive和ref

        存放数据的函数，可实现数据绑定

        （1）reactive:存放对象类型数据，可以返回该对象

        （2）ref:存放简单类型或对象类型的数据，返回一个对象

共同点：都可以实现数据绑定

不同点：

        reactive：主要用于处理对象或数组等复杂数据类型，将整个对象或数组转为响应式对象。它能够深度监听对象内部属性的变化，并触发视图更新。

        ref：主要用于处理基本类型数据（如字符串、数字、布尔值等）或单一值，将单一值转为响应式数据。虽然ref也可以包装对象或数组，但通常不是最佳实践，因为它可能不会完全响应化对象内部的属性变化。

        ref：通过.value属性来访问或修改其内部的值。在模板中，Vue会自动处理ref的.value访问，但在JavaScript代码中需要显式访问.value。

        reactive：直接通过对象属性访问其值或方法，无需额外的.value属性。

computed计算属性