Vue 3 中 ref 和 reactive 的区别

在 Vue 3 中，ref 和 reactive 是响应式系统的两个基本 API，它们都用于创建响应式数据，但在使用方式和适用场景上有所不同。

ref

ref 用于创建一个响应式的引用，其参数可以是任何类型的值，包括基本类型（如 String、Number）或对象类型。

• 使用 ref 创建的响应式数据，访问或修改时需要通过 .value 属性。这是因为 ref 实际上创建了一个包含 value 属性的响应式对象。
• ref 更适合用于基本类型数据的响应式，但也可以用于对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { ref } from 'vue';

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

const user = ref({ name: 'Alice', age: 30 }); // 创建一个响应式的对象

console.log(count.value); // 输出 0

count.value++; // 将 count 的值增加 1

console.log(count.value); // 输出 1

user.value.name = 'Bob'; // 修改 user 对象的 name 属性

console.log(user.value.name); // 输出 'Bob'

reactive

reactive 用于创建一个响应式的对象或数组。它的参数必须是对象或数组，不能是基本类型。

使用 reactive 创建的响应式数据，访问和修改时不需要 .value 属性，可以直接像操作普通对象或数组那样操作。

reactive 提供了更深层次的响应式转换，适用于复杂的对象或数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: 'Bob',
    age: 25,
  },
});

console.log(state.count); // 输出 0

state.count++; // 将 count 的值增加 1

console.log(state.count); // 输出 1

state.user.name = 'Alice'; // 修改 user 对象的 name 属性

console.log(state.user.name); // 输出 'Alice'

主要区别

• 使用场景：ref 适用于基本数据类型和对象，而 reactive 仅适用于对象和数组。
• 访问方式：使用 ref 创建的响应式数据需要通过 .value 访问或修改，而 reactive 创建的响应式对象或数组则像普通对象或数组一样直接操作。
• 响应式深度：reactive 提供深层响应式，意味着对象内部的任何变化都是响应式的。而 ref 用于对象时，对象内部的属性变化也是响应式的，但它更多是作为一个值的容器。

选择 ref 还是 reactive

选择 ref 还是 reactive，主要取决于你的具体需求和使用场景。

• 如果需要创建响应式基本类型数据，或者需要更细粒度的控制，可以使用 ref。
• 如果需要创建响应式对象或数组，并且需要更深层次的响应式，可以使用 reactive。

在Vue 3中，“自动暴露的特性”主要指的是在使用组合式API时，通过<script setup> 标签在单文件组件(SFC)中编写的变量和函数会自动暴露给模板，无需手动返回。这种自动暴露的特性是专为组合式API设计的，以简化代码和提高开发效率。

下面是这四种情况下自动暴露特性的应用情况：

1. 选项式API + HTML：在传统的选项式API中，不涉及自动暴露的特性。所有的数据、方法等都需要在Vue实例的选项中声明（如data, methods等），并且在HTML模板中直接使用。

2. 选项式API + SFC：同样，在使用选项式API时，即使是在单文件组件(SFC)中，自动暴露的特性也不适用。所有的响应式数据、计算属性、方法等仍然需要在组件的选项中明确声明。

3. 组合式API + HTML：在非SFC环境下使用组合式API（例如直接在HTML文件中通过<script>标签使用Vue），虽然可以使用组合式API的所有功能，但是没有“自动暴露给模板”的特性，因为这需要Vue的编译器支持，而在纯HTML环境中，Vue编译器不会处理这些脚本。

4. 组合式API + SFC：这是自动暴露特性真正发挥作用的场景。当你在单文件组件中使用 <script setup> 语法时，所有在<script setup> 中声明的变量和函数都会自动暴露给该组件的模板，无需手动通过 return 语句暴露。这极大简化了代码，使得开发更加高效。

总结来说，自动暴露的特性是专为Vue3中的组合式API设计的，且主要在使用 <script setup> 语法的单文件组件(SFC)中生效。在其他情况下，这一特性不适用。

约定俗成的命名法是指为了让代码更易读、易维护，在编程中形成的一套通用的命名规则。这些规则通常不是强制性的，但大多数开发者都会遵循它们。

以下是一些常见的约定俗成命名法：

1. 驼峰命名法：

   • 每个单词的首字母大写，其他字母小写，例如：
     • firstName
     • lastName
     • emailAddress
   • 通常用于命名变量、函数、方法和属性。

2. 下划线命名法：

   • 单词之间用下划线连接，例如：
     • first_name
     • last_name
     • email_address
   • 通常用于命名数据库中的字段和常量。

3. Pascal命名法：

   • 每个单词的首字母大写，例如：
     • FirstName
     • LastName
     • EmailAddress
   • 通常用于命名类、接口和枚举。

4. 匈牙利命名法：

   • 在变量名前加上一个或多个前缀表示变量的类型或用途，例如：
     • iCount：整数类型的计数器
     • strName：字符串类型的姓名
   • 可以提高代码的可读性，但可能会使代码变得更冗长。

5. Kebab命名法：

   • 单词之间用连字符连接，例如：
     • first-name
     • last-name
     • email-address
   • 通常用于命名CSS类和HTML元素的ID属性。

总结：

约定俗成的命名法能够提高代码的可读性和可维护性。在选择命名法时，应考虑代码的具体情况，并遵循团队的编码规范。

回调函数：代码模块化的利器

回调函数是指在另一个函数内部被调用的函数。它通常作为参数传递给另一个函数，并在另一个函数执行完毕后被调用。

回调函数的作用

• 将代码逻辑分离出来，使得代码更加模块化和可维护。
• 避免阻塞程序的运行，提高程序的性能和效率。

回调函数的应用场景

• 异步编程：在异步编程中，回调函数用于在异步操作完成后执行特定的代码。例如，在使用 Ajax 请求数据时，可以使用回调函数来处理请求结果。
• 事件处理：在事件处理中，回调函数用于响应用户的操作。例如，在点击按钮时，可以使用回调函数来执行特定的操作。
• 其他场景：回调函数还可以用于其他场景，例如动画、游戏开发等。

1. 将函数作为参数传递

在编程中，我们可以将函数作为参数传递给另一个函数。这被称为函数参数化。函数参数化可以使代码更加模块化和可重用。

2. 回调函数的封装思想

回调函数是一种特殊的函数参数化形式。回调函数通常用于异步编程中，它允许我们在异步操作完成后执行特定的代码。

3. 回调函数的优势

使用回调函数具有以下优势：

• 代码模块化：回调函数可以将代码逻辑分离出来，使得代码更加模块化和可维护。
• 提高效率：使用回调函数可以避免阻塞程序的运行，提高程序的性能和效率。
• 增强灵活性：回调函数可以提供更大的灵活性，允许我们在不同的场景中使用相同的代码逻辑。

MyBatis 的工作流程大致可以分为以下几个步骤:

1. 解析配置文件

MyBatis 会解析全局配置文件 mybatis-config.xml 和映射器配置文件 *.xml，并将解析结果存储在 Configuration 对象中。

2. 创建 SqlSessionFactory

SqlSessionFactory 是 MyBatis 的核心类，它用于创建 SqlSession 对象。

3. 创建 SqlSession

SqlSession 代表与数据库的一次会话，它包含了执行 SQL 语句的所有方法。

4. 执行 SQL 语句

可以通过 SqlSession 对象执行增删改查等操作。

5. 关闭 SqlSession

使用完 SqlSession 对象后，需要将其关闭以释放资源。

多道程序环境下的进程执行

在多道程序环境下，系统允许多个进程并发执行。在单处理机环境下，由于系统中只有一台处理机，因此每次只允许一个进程执行，其余进程只能等待。当正在执行的进程提出某种资源请求，如打印请求，而打印机又正在被其他进程占用时，由于打印机属于临界资源，因此正在执行的进程必须等待并释放处理机，直到打印机空闲并再次获得处理机时，该进程才能继续执行。可见，由于资源等因素的限制，进程的执行通常不可能一气呵成，而是会以停停走走的方式运行。

对于内存中的每个进程，其在何时能获得处理机并运行，何时又因提出某种资源请求而暂停，以及进程以怎样的速度向前推进，每道程序总共需要多少时间才能完成等，都是不可预知的。由于各用户程序的性能不同，例如，有的程序侧重于计算而较少需要I/O，而有的程序则计算少而I/O多，这样，很可能是先进入内存的作业后完成，而后进入内存的作业先完成。换言之，进程是以人们不可预知的速度向前推进的，此即进程的异步性（asynchronism）。尽管如此，倘若在OS中配置完善的进程同步机制，且运行环境相同，则作业即便经过多次运行，也都会获得完全相同的结果的。因此，异步运行方式是被允许的，而且是OS的一个重要特征。

在 Vue 中，v-for 用于遍历数组或对象的数据，可以使用两种语法：item in items 和 item of items。这两种语法的区别主要体现在对对象的遍历上。

1. item in items

这是较早引入的语法，主要用于遍历对象的键。例如：

HTML

1
2
3

<ul>
  <li v-for="key in object">{{ key }}: {{ object[key] }}</li>
</ul>

在这个例子中，key 会依次被赋值为对象的每个键，然后通过 object[key] 来访问对应的值。

2. item of items

这是 ES6 引入的新语法，更灵活，不仅可以遍历对象的键，还可以遍历数组的元素。例如：

HTML

1
2
3

<ul>
  <li v-for="value of array">{{ value }}</li>
</ul>

在这个例子中，value 会依次被赋值为数组的每个元素。

总结

总的来说，在遍历对象时，in 语法用于遍历键，而 of 语法用于遍历值。在遍历数组时，两者是等效的，你可以根据个人偏好选择使用其中之一。在实际开发中，of 语法更常用，因为它的语法更加清晰，适用于遍历数组和对象的情况。

1. 什么是跨域？

跨域（Cross-Origin）指的是在浏览器环境下，当前网页通过 JavaScript 向与其不同域的服务器发送请求的情况。这会触发浏览器的同源策略，限制跨域请求，以防止恶意行为。

2. 同源策略（Same-Origin Policy）

同源策略要求网页中的脚本只能从相同的源（同一域名、协议和端口）加载，以保障用户信息的安全。当页面尝试从不同域的服务器请求数据时，浏览器会拦截这样的请求。

3. 解决跨域问题的方法

a. JSONP（仅限 GET 请求）：利用动态创建 script 标签，通过 GET 请求获取数据。但存在安全性 和功能限制。

b. CORS (Cross-Origin Resource Sharing)：在服务器端设置相应的 HTTP 头部，允许指定源的 访问。支持更灵活的跨域请求，包括复杂请求（如 PUT、DELETE 等）。

c. 代理服务器：通过在同一域内部署代理服务器，实现跨域请求。前端向代理服务器发送请求，再 由代理服务器转发至目标服务器。

4. 总结

跨域问题是由浏览器的同源策略引起的，为了在不同域之间安全地进行数据交互，需要采用一些解 决方法，如 JSONP、CORS 和代理服务器。选择合适的方法取决于项目需求和安全考虑。