前言：前面期末周突然加了一个项目作业，感觉不是开发能力而是vibecoding能力，想写一个工具与vue有关的，但之前没有系统学习过，在微信公众号里面看了几篇好文章，然后真自己实际上手起来的话还是挺困难的，因此本篇作为一个按照官方给的一个快速上手教程来，默认是.vue结尾的设置，在官方基础上进行的一些个人的尝试和思考 科技新闻。
reactive() 返回的对象引用不应该被替换（替换会丢失响应性） ref() 返回的包裹对象引用也不应该被替换（修改值应该通过 .value）
这里就是三个条件判断，初始的值为100，每次点击按钮之后-10，最终呈现的是三种不同的效果，然后再来一个表单绑定实时显示awesome的大小，这样看的就更加清楚了。
VU背景与起因
然后!== 是严格不等于，比较的是对象引用（内存地址），而不是值的内容
v-if：真正的条件渲染 条件为 false 时，元素直接从 DOM 中移除/销毁；为 true 时才创建并插入 DOM 适用场景：切换频率低、条件很少改变的场景（如权限控制、弹窗）
然后reactive调用的是对象类型（Object、Array、Map、Set），刚开始看到这个很懵，那就先来了解一下基本类型，即单个的、不可再分的值，直接存在内存栈里：
VU事件经过
能在改变时触发更新的状态被称作是响应式的，这里可以看官方教程或者我下面的代码：
JavaScript 的 基本类型是按值传递的，无法被 Proxy 拦截。
了解了reactive ref之后就是动态渲染文本，即双花括号语法动态渲染文本
VU各方回应
filter 会遍历数组中的每一项，对每一项执行回调函数 (f) => f !== fruit： 当 f 是要删除的那个水果时 →f !== fruit 为 false被剔除 当 f 是其他水果时 → f !== fruit 为 true 被保留 最终返回一个全新的数组，里面不包含被点击删除的那一项。
板引用是通过 ref() + 同名属性，在 <script setup> 中直接获取某个 DOM 元素或子组件实例的桥梁。它是 Vue 对原生 document.getElementById() 的响应式替代方案
嵌套组件概念的引入： 父组件可以在模板中渲染另一个组件作为子组件。要使用子组件，我们需要先导入它，然后就能在模板中使用组件：
VU影响分析
Proxy 是JavaScript ES6 的原生特性，相当于给对象加了一层"拦截器/代理"。当访问或修改对象的属性时，Proxy 会先拦截这个操作，然后执行额外的逻辑（比如通知 Vue 更新页面），最后再把操作传递给原始对象。
首先是声明模板引用：
这些基本类型就是通过ref来进行调用，ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。 直接这么说有点抽象，那就分开来，首先得知道什么是包裹对象：
还有一个是之前提到的.value的问题，在模板中是不需要加的，但是在模板外可以加上这个对原本的内容进行相应的修改，就比如：
这个在快速入门里面讲的不是很详细，然后参考了网上别的师傅写的文章，首先得是理解这个标题是什么意思： 属性绑定（Attribute Binding）是 Vue 提供的一种将组件数据与 HTML 元素属性建立关联的方式。通过属性绑定，我们可以让元素的属性值随着数据的变化而自动更新，实现数据驱动视图的核心思想，基础语法如下：
Vue 的核心功能是声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新
ref(null)：创建一个响应式变量，初始值为 null。 null是因为此时组件还没有渲染，DOM 还不存在，所以暂时没有东西可以绑定。 命名约定：变量名 pElementRef 必须与下面模板中ref="pElementRef" 完全一致，Vue 靠这个名字建立关联
那么在此基础上可以增加多级标题或具体内容，可以自行尝试：
这里其实更常用的是数组，对象等等，但是因为是初学所以就先不拓展了，样例给出的效果：
举例如下：
或者更换任意鼠标事件：
最后是将新得到的数组重新进行赋值，原因是filter 不会修改原数组，它返回的是一个新数组。必须将新数组赋值回 fruits.value，才能触发 Vue 的响应式更新
生命周期就是 Vue 组件从 创建 → 挂载 → 更新 → 销毁 的完整过程。Vue 在特定阶段会自动调用对应的钩子函数，让我们能在"正确的时机"执行代码 核心钩子一览：
然后reactive里的花括号即键值对：
它不是原生 HTML 标签：虽然原生 HTML5 也有一个 <template> 标签（用于存放客户端不渲染的惰性内容），但在 Vue 的单文件组件（.vue）中，它是 Vue 编译器专属的语法标记
这里并不是直接的todo列表，而是通过数组下标来进行创建相应的元素，当我们插入或者删除其中某个元素时，后续所有key的index都会发生改变，那么就要回到样例中的todo列表了，但这里还是拿水果来举例，改成下面这样子：
Vue 渲染到这个 <p> 标签时，发现 ref="pElementRef" Vue 自动将真实的 <p> DOM 节点赋值给 pElementRef.value 这个赋值动作发生在 DOM 插入页面之后、onMounted 回调执行之前
这里的h1好理解，就是html里面的一级标题，然后有一个template：
将教程中的语言结合起来构造出的结果就是这样：
然后在写的过程中其实遇到了一点情况，首先我刚开始是这么写的：
onMounted：确保回调在组件挂载完成后才执行。此时 pElementRef.value 已经不再是 null，而是真实的 <p> 元素。 .textContent = 'mounted!'：直接调用原生 DOM API，将段落文本从 "Hello" 修改为 "mounted!" 效果：用户在页面上看到的是 mounted! 而不是 Hello
列表渲染指的是：使用 v-for 指令，根据数组或对象的数据，自动生成一组结构相同的 DOM 元素。 简单来说就是：我们只需要写一次模板代码，Vue 会根据数据的长度自动"复制"出 N 个元素。它是条件渲染（控制单个元素的有无）的自然延伸——从"控制一个"变成"批量生成多个"。
那么最终结果就是这样显示：
然后在模板中进行相应绑定
并且不会被渲染到 DOM 中：Vue 编译后，<template> 标签本身会消失，只有里面的内容（如 <h1>Hello World!</h1>）才会被真正渲染到页面上
知道了这些我们就能创造自己的页面内容了：
然后这里也有多分支判断，就比如：
reactive({ count: 0 }) 的意思就是：把一个包含 count 属性的普通对象，交给 Vue 变成响应式的。我们可以放任意多个键值对进去：
ref() 就是把基本类型装进去，让它变成可以被 Vue 监控的对象。 而.value就是访问的入口，然后在模板中会自动解包所以无需再加value
文档中直接给出的例子有点复杂，先从一个简单的看起：
快速入门中在文本中已经给出了相应答案，我们可以在此基础上添加相应变种：
就类似于HTML DOM事件，在快速入门中给出的案例就是点击按钮计数增加：
代码的细节放到后面再做解释，先继续跟着教程往下走，可以看到一句话：由 reactive() 创建的对象都是 JavaScript Proxy
条件渲染指的是：根据 JavaScript 表达式的真假值，动态地决定某个 DOM 元素是否显示、或者显示哪一个元素，简单来说就是：让模板具备"判断能力"，而不是永远写死所有 UI
解决方法有三种：
表单绑定指的是：将表单元素（<input>、<select>、<textarea> 等）的值与 Vue 的响应式数据进行双向同步。 简单来说就是： 数据 → 视图：JS 变量变了，输入框里的内容自动更新 视图 → 数据：用户在输入框里打字/选择，JS 变量自动更新
就拿文档里面的来说要调用toggle来改变awesome的真值，在 awesome 的值为真时渲染。若 awesome 更改为假，它将被从 DOM 中移除，文档中因此给出了vi-if和vi-else两个条件判断在awesome的值为真或假时的两种显示，我们需要做的就是补全toggle函数，让调用函数的按钮在被点击时能够改变awesome的真假，这里就可以直接运用:
这里关键是用的两个方法：
这里描述的比较详细，就不再多说了：
在 Vue.js 中，<template> 是组件的模板容器，用于包裹该组件所有的 HTML 结构：
在教程最开始的时候给出了一段代码：
那么最后的counter.count就是访问响应式对象的属性
教程中直接给出了相应的解释：
下面的是对象类型【引用】：
拿官方文档中的例子来看：
最后在生命周期中安全访问：
或者手动进行更改
也类似于cpp中的继承，描述得也比较详细，注意原文档中给出的是动态传递，如果不加冒号的话便是静态，直接输出后面的字符串：
首先这里的const即常量，在 Vue 3 <script setup> 中，我们几乎总是用 const 来声明响应式状态，因为:
目前看的也就这些，作为一个初步的了解
