Vue3-创建实例

Vue 3 是一个现代 JavaScript 框架，用来构建前端应用程序。它让你可以快速创建动态、交互性强的界面，最重要的是——简单高效！

1.创建实例

在创建实例之前，需要去vue3官网进行安装，一旦安装好 Vue 3，我们要创建一个应用实例。这就像是给你的应用一颗心脏，让它可以跳动起来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.global.js"></script>    //引入Vue.js
</head>
<body>
  <div id = "app">
    {{msg}}
  </div>

  <script>
    //创建Vue实例
    Vue.createApp({
      setup() {
          return{
            msg:"Hello Vue"
          }
      }
    }).mount('#app')  //挂载到div上
  </script>
</body>
</html>

setup 是 Vue 3 的 Composition API 中的一个核心函数，负责在组件创建时初始化逻辑。它相当于 Vue 2 中 data、methods、computed 等选项的集合，允许你在一个地方完成数据定义、方法定义和其他逻辑。让我们一步步看看它的作用。

现在展示一个模式块开发的写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    {{ msg }}
  </div>

  <script type="module">
    // 模块化开发
    import { createApp, ref } from './vue.esm-browser.js';

    // 创建Vue实例
    createApp({
      setup() {
        const msg = ref("Hello Vue"); // 使用 ref 包裹字符串
        return { msg };
      }
    }).mount('#app');  // 挂载到div上
  </script>
</body>
</html>

2.ref（）与reactive（）区别

1. `ref()`：简化为“你的小单品状态”

一句话解释：ref()是用来管理单一值的——类似“单品”商品，只负责一件简单的事情。它能使普通变量变成响应式（reactive），让Vue能跟踪它的变化。

使用示例

import { ref } from 'vue';

const count = ref(0); // 像定义普通变量一样，把数值变得“聪明”些

// 读取值：得通过 .value
console.log(count.value); // 0

// 修改值：依旧得用 .value
count.value += 1;
console.log(count.value); // 1

总结：

单一值管理：适用于“简单的”数据，比如数值、字符串等。
用.value访问：和普通变量不同，得用.value来取和设置值。
适合小而简单的数据：不要拿它来管理复杂的对象或数组。

2. `reactive()`：当你的数据是“一整套餐具”

一句话解释：reactive()用来管理复杂的对象，比如对象或数组，适合用来保存多个值的集合，类似一整套组合的状态。

使用示例

import { reactive } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 25
});

// 读取和修改值：像普通对象一样
console.log(user.name); // Alice

user.age += 1;
console.log(user.age); // 26

总结：

复杂数据管理：适用于“组合数据”，比如对象或数组。
直接访问属性：像普通对象一样，不用.value。
适合包含多个属性的数据：更适合结构稍复杂的数据集合。

`ref()`和`reactive()`的最佳实践

小数据用ref()，复杂结构用reactive()：
- 简单数据或基础类型（如数值、字符串）直接用ref()。
- 复杂数据结构（如对象或数组）推荐用reactive()。
想组合使用？没问题：
- reactive()对象可以包含ref()属性，轻松实现组合响应式效果。
保持代码清晰：
- 使用ref()和reactive()，既能保持状态简单，又能让代码结构分明。

总之，记住这个公式：ref()=小单品，reactive()=整套餐具。