前端知识一

（ref函数）1.为什么vue3中使用ref来创建响应式数据，而不是直接声明一个变量

import { ref } from "vue";

const count = ref(0); // 创建一个响应式的计数器，初始值为0

function increment() {
  count.value++; // 增加计数器的值
}

function decrement() {
  count.value--; // 减少计数器的值
}

ref是Vue 3 Composition API中提供的一个函数，用于创建一个响应式数据的引用。
当您使用ref创建一个变量时（比如const count = ref(0);），Vue的响应式系统就能够追踪到这个变量的变化，当count.value被修改时，Vue会自动更新依赖于count的DOM。
此外，ref不仅限于基本数据类型，还可以用于对象或数组等复杂数据类型。这使得ref在处理各种类型的数据时都非常灵活。
综上所述，使用ref是为了让Vue的响应式系统能够追踪到数据的变化，从而自动更新DOM。如果您直接声明一个变量而不使用ref，那么Vue将无法追踪到这个变量的变化，也就无法实现响应式更新。

（inject函数）2.inject函数

inject是用来从祖先组件中获取数据的函数。在Vue中，组件可以嵌套，有时候一个深层的子组件需要用到顶层或中间某层祖先组件的数据。这时，如果每层组件都通过props来传递数据，就会显得很繁琐。Vue提供了provide和inject这两个函数来解决这个问题。

provide在祖先组件中用来提供数据，而inject在后代组件中用来获取这些数据。
如你有一个顶层组件，它提供了一个用户的名字：

// 顶层组件
import { provide } from "vue";

const userName = "张三";
provide("userNameKey", userName); // 提供用户名，键为"userNameKey"

然后在深层子组件中，可以这样获取用户名：

import { inject } from "vue";

const userName = inject("userNameKey"); // 获取用户名，键为"userNameKey"
console.log(userName); // 输出：张三

注意，inject的参数是你从provide那里得到的键名

3. import和export

import和export是javaScript ES6模块系统中的语法，用于导入和导出模块的功能或数据，在vue3中，他们被广泛应用于组件，库和工具函数的模块化开发

什么是模块：
一个Vue项目就像一个大房子，里面有很多房间（文件）。每个房间都有自己的家具和装饰（代码）。模块就是一个这样的房间，它包含了一些特定的功能或数据，比如一个组件、一个工具函数或者一个库

为什么需要import和export
有时候，你想从一个房间（模块）里拿点东西到另一个房间去用，比如你想用另一个组件里的一个方法。这时候，你就需要用到import和export了。export就像是把东西放在房间门口，让其他人可以拿走；import就像是去别人门口拿东西回来用

export的用法
当你有一个函数、一个变量或者一个类，你想让其他模块也能用到它，你就可以用export来导出它

// utils.js
export function add(a, b) {
  return a + b;
}

export const pi = 3.14;

import的用法
当你想要使用其他模块导出的功能或数据时，你就需要用import来导入它们

// App.vue
<script>
import { add } from './utils.js';

export default {
  name: 'App',
  mounted() {
    console.log(add(2, 3)); // 输出: 5
  }
}
</script>

在这个例子中，我们从utils.js模块导入了add函数，并在App.vue组件的mounted钩子中使用了它

默认导出
除了上面这种导出多个成员的方式，你还可以使用默认导出（default export）来导出一个模块的主要功能或数据。每个模块只能有一个默认导出

// myComponent.vue
<template>
  <div>Hello, World!</div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

导入默认导出时，你可以给它起任何名字

// App.vue
<script>
import MyComponent from './myComponent.vue';

export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>

总结：import和export 让你可以在Vue 3项目中方便地共享代码和功能。通过export，你可以把模块中的功能或数据导出给其他模块使用；通过import，你可以从其他模块导入你需要的功能或数据

4.组件

什么是组件

想象你搭乐高，‌组件就是一块积木‌。
比如微信的「朋友圈」界面：

点赞按钮是一个组件
评论输入框是另一个组件
整个朋友圈列表又是一个大组件
‌好处‌：哪里需要哪里搬，不用重复造轮子

‌为什么用组件？‌
‌场景1‌：你写了 10 个页面都有「登录按钮」，改颜色要改10次 → ‌直接改组件，一次搞定‌
‌场景2‌：老板要加个「分享到微博」功能 → ‌直接拿现成的分享组件改改就能用‌
‌场景3‌：同事看不懂你的代码 → ‌拆成组件，像看说明书一样清晰

组件示例（按钮组件）：

<!-- Button.vue -->
<!-- 模板：组件的HTML结构 -->
<template>
  <button class="my-btn" @click="handleClick">
    {{ buttonText }}
  </button>
</template>

<!-- 逻辑：组件的行为 -->
<script>
export default {
  props: { // 接收父组件传过来的参数（像函数参数）
    buttonText: {
      type: String,
      default: '点我'
    }
  },
  methods: {
    handleClick() {
      this.$emit('btn-click') // 触发自定义事件（告诉父组件我被点了）
    }
  }
}
</script>

<!-- 样式：只作用于当前组件 -->
<style scoped>
.my-btn {
  background: pink;
  padding: 10px 20px;
}
</style>

在父组件里使用该组件示例：

<template>
  <div>
    <!-- 像用普通HTML标签一样使用 -->
    <Button 
      button-text="提交订单" 
      @btn-click="onButtonClick" 
    />
  </div>
</template>

<script>
import Button from './Button.vue' // 导入积木

export default {
  components: { Button }, // 声明要用这个积木
  methods: {
    onButtonClick() {
      console.log('按钮被点了！')
    }
  }
}
</script>

核心概念：

• ‌props‌ → 父组件给子组件传参数（就像妈妈给你带饭盒）
• ‌$emit‌ → 子组件给父组件发消息（就像你打电话喊妈回家）
• scoped style‌ → 组件样式不污染别人（你的纹身不影响隔壁老王） ‌
• 组件复用‌ →同一把钥匙开多扇门（不用每扇门都造新钥匙，不用每个页面都写同样的样式按钮代码）

实际开发步骤：

• ‌拆组件‌：看到一个页面重复 3 次的部分 → 拆！
• ‌定 props‌：想清楚这个组件需要别人传什么参数
• ‌抛事件‌：想清楚这个组件要通知别人什么事
• ‌写文档‌：告诉队友这个组件怎么用（参数说明、事件说明）

如你要做购物车，可以拆成：

• 商品卡片组件（显示图片、价格）
• 数量选择器组件（加减按钮）
• 总价计算组件（自动算钱）

‌每个组件各司其职，组合起来就是完整功能！

5. <script setup>和<script>对比

‌<script>‌：传统写法，像写“说明书”一样分模块（data、methods、props…）。代码量‌ 较多（需要写export default结构）
‌<script setup>‌：Vue 3 的“懒人语法糖”，所有代码直接写在顶层，更简洁，但需要适应新规则。代码量极少

<script setup> ‌本质是编译时的语法糖‌，最终会转换成普通<script>。
在<script setup>中，‌顶层变量自动暴露给模板‌，但用ref时记得.value（在模板中会自动解包）。
新项目无脑用<script setup>，老项目慢慢过渡；想少写代码用 <script setup>，强迫症分模块用 <script>

写法对比：

差异对比：

在 Vue 3 的<script setup> 语法糖中，你不能通过 export default { props: {} } 的方式来定义 props。这是因为

在 <script setup> 中，你应该使用 defineProps、defineEmits 和 withDefaults 等函数来定义 props、emits 和带有默认值的 props。这些函数是在编译时由 Vue 处理的，它们允许你在 <script setup> 中直接使用这些定义，而不需要将它们嵌套在 export default 对象中

在 <script setup> 中，你不需要导出对象，而是直接编写组合式 API 函数（如 ref、reactive、computed 等）和生命周期钩子。Vue 会自动处理这些函数的注册和暴露

6. setup函数

在 Vue 3 中，setup 函数是一个新的组件选项，它是组合式 API（Composition API）的入口点。setup 函数在组件创建之前被调用，并且在 beforeCreate 和 created 生命周期钩子之前执行。它接收两个参数：props 和 context

props：
props 是一个包含组件外部传入的所有 props 的对象。这些 props 是在组件的

context：
context 是一个普通的 JavaScript 对象，它暴露了三个组件的实例属性：attrs、slots 和 emit
attrs 包含了父作用域中不作为 prop 被识别（且没有通过 v-bind=“$attrs” 传入内部组件）的特性绑定（attribute bindings）。
slots 是包含所有插槽内容的对象
emit 是一个函数，用于触发当前组件上的自定义事件。它接受一个事件名作为字符串，以及可选的附加参数，这些参数将作为事件数据传递给监听器

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props, context) {
    // 直接访问 props
    console.log(props.message);

    // 使用 context 触发事件
    context.emit('custom-event', 'Some data');

    // 返回一个对象，其中的属性和方法可以在模板中使用
    return {
      // 你可以在这里定义新的响应式数据或方法
    };
  }
};
</script>

在 <script setup> 语法糖中，你不需要显式地调用 setup 函数，因为 Vue 会自动处理。相反，你可以直接使用 defineProps 和 defineEmits 函数来分别定义 props 和 emit 事件，并且所有顶层的响应式引用和计算属性都会自动暴露给模板

注意:
setup 函数是 Vue 3 中引入的，不适用于 Vue 2
在 setup 函数中，你不能使用 this 关键字来访问组件实例，因为 setup 在组件实例被创建之前执行
setup 函数是可选的，但如果你打算使用组合式 API，那么通常会用到它