Vue3详细介绍，正则采集器所用前端框架

Vue3 引入了一个全新的响应式系统，它是基于ES6的Proxy特性构建的。这个系统使得 Vue 能够更加高效地追踪数据的变化，并在数据发生变化时自动更新DOM。响应式系统的核心是"可观察"，当数据变化时，视图会响应这些变化并重新渲染。

一、使用响应式助手声明基本类型

1、使用reactive代替Object，Array，Map，Set

reactive 用于定义一个响应式的对象。它接受一个普通对象并返回该对象的响应式代理。这使得整个对象的属性都是响应式的。

2、使用ref代替String，Number，Boolean

ref 用于定义响应式的引用类型。它接受一个参数值，并返回一个响应式且可变的 ref 对象。这个对象有一个 value 属性，指向传入的参数值。
ref 的使用场景：

• 当你需要包装一个基本类型值（如字符串、数字、布尔值）使其称为响应式时
• ref 也可以包装数组或对象，但通常情况下我们会使用 reactive 来处理这些复杂类型。

3、解构失去响应式值

return返回响应式对象的属性时不能用解构。在 vue3 中，如果你使用解构来访问一个由 reactive 创建的响应式对象的属性，这些属性会失去其响应式特性。这是因为解构操作实际上是在创建对象属性的本地副本，而这些副本不再是响应式的。 

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello'
});

// 解构 state 对象
const { count, message } = state;

state.count++;
// count 和 message 在这里是非响应式的
console.log(count); // 输出 0
console.log(message); // 输出 'Hello'

为了保持响应式，你应该直接使用原始的响应式对象，或者使用 vue 提供的 toRefs 函数将 reactive 对象的每个属性都转换为 ref 对象，这样每个属性都保持响应式。

import { reactive, toRefs } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello'
});

// 使用 toRefs 保持响应式
const { count, message } = toRefs(state);

// 现在 count 和 message 仍然是响应式的
count.value++; // state.count 也会更新
console.log(state.count); // 输出 1

二、模板语法和基本指令

在 Vue3 中，模板语法和基本指令是构建动态用户界面的核心。

1、模板语法

Vue.js 使用基于HTML的模板语法，允许你声明式地将DOM绑定到底层组件实例的数据。所有 Vue.js 模板都是有效的HTML，可以被遵循规范的浏览器和HTML解析器解析。

在模板中你可以使用双大括号 { { }} 进行文本插值

<span>{
  
  {message}</span>

2、v-bind

v-bind 指令用于动态地绑定一个或多个属性，或一个组件prop到表达式。在渲染的DOM上，你会看到属性值被设置为指令的表达式计算的结果。

<img v-bind:src="imageSrc"/>

<!-- 缩写 -->
<img :src="imageSrc"/>

3、v-model

v-model指令在 <input>、<textarea>和<select>元素上创建双向数据绑定。根据控件类型自动选择正确的方法来更新元素。

<!-- 在文本输入框中使用 v-model -->
<input v-model="message">

<!-- 在单选按钮中使用 v-model -->
<input type="radio" v-model="picked" value="One">

<!-- 在选择框中使用 v-model -->
<select v-model="selected">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

4、v-for

v-for 指令基于一个数组来渲染一个列表。该指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 是数组元素迭代的别名。

<ul>
    <li v-for="item in items" :key="item.id">{
  
  {item.text}}</li>
</ul>

使用 :key 是为了给 Vue 一个提示，以便它可以跟踪每个节点的身份，从而重用和重新排序现有元素。

5、v-if、v-else-if、v-else

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 的时候渲染。

<span v-if="awesome">Vue is awesome</span>
<span v-else-if="ok">Vue is ok</span>
<span v-else>Vue is not ok</span>

6、vue属性

在 Vue3 中，当你使用 ref 函数创建响应式引用时，需要通过 .value 属性来访问或修改数据，因为 ref 返回