#0 学习使用vite+vue3的所遇问题总结（2024年2月1日）
- 组件中使用
<script>标签忘记加 setup
这会导致Navbar 没有暴露出来，导致使用不了，出现以下报错
这是因为，如果不用setup，就得使用 export default ……
setup 是后者的语法糖
vuejs.org: 在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用单文件组件 (SFC) 来避免这种情况。我们可以使用
<script setup>来大幅度地简化代码。
-
在Vue.js中，你可以通过route对象来接收从router-link传递过来的参数。具体来说，你可以使用route对象的params属性来获取路由参数。
-
通过 传递的参数，都需要设置到路由中，否则会丢失参数
vite/vue3/vue-router/vuex 已经整体上掌握，开始复习ES6（2024年2月2日）
学习资料来源： 菜鸟教程
let 和 const 命令。
- let 块级作用域
for (let i = 0; i < 10; i++) {
// ...
}
-
const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。
-
注意要点
const 如何做到变量在声明初始化之后不允许改变的？ 其实 const 保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改动。 此时，你可能已经想到，简单类型和复合类型保存值的方式是不同的。是的，对于简单类型（数值 number、字符串 string 、布尔值 boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量。而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重。 -
ES6 解构赋值
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。 -
ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。
注意点
Symbol 值作为属性名时，该属性是公有属性不是私有属性，可以在类的外部访问。但是不会出现在 for…in 、 for…of 的循环中，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 返回。如果要读取到一个对象的 Symbol 属性，可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。 -
ES6 Map 与 Set
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。 -
Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。
Proxy 不直接操作对象，而是像代理模式，通过对象的代理对象进行操作；
通过构造函数新建实例时其实是对目标对象进行了浅拷贝，因此目标对象与代理对象会互相影响；
get() 方法可以继承，let obj = Object.create(proxy);
Reflect 可以用于获取目标对象的行为，它的方法与 Proxy 是对应的。 -
箭头函数
箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。 -
在JavaScript中，如果一个函数没有明确的return语句或者没有返回值，它会默认返回"undefined"。而且就算是return了而没有执行，它此时的类型也是undefined。
-
class 的本质是 function。
它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。
类中方法不需要 function 关键字。
方法间不能加分号。 -
ES6 模块
ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。 -
ES6 Promise 对象
是异步编程的一种解决方案。
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
vite, vue3, vue-router, vuex, ES6 学习完成 （2024年2月4日）
复习vuejs文档 （2024年2月18日）
以下内容摘自 Vue 3 的文档
1. 计算属性
基于响应式依赖被缓存
***puted() 方法期望接收一个 getter 函数，返回值为一个计算属性 ref。
Vue 的计算属性会自动追踪响应式依赖。
下面的计算属性永远不会更新，因为 Date.now() 并不是一个响应式依赖：
const now = ***puted(() => Date.now())
计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。
不需要缓存时使用方法调用
方法调用总是会在重渲染发生时再次执行函数。如果你确定不需要缓存，那么也可以使用方法调用。
计算属性是“临时快照”
避免直接修改计算属性值。从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，更改快照是没有意义的，应该更新它所依赖的源状态以触发新的计算。
2. Class 和Style绑定
绑定一个返回对象的计算属性
这是一个常见且很有用的技巧：
const isActive = ref(true)
const error = ref(null)
const classObject = ***puted(() => ({
active: isActive.value && !error.value,
'text-danger': error.value && error.value.type === 'fatal'
}))
<div :class="classObject"></div>
$attrs 接收 class
如果你的组件有多个根元素，你将需要指定哪个根元素来接收这个 class。你可以通过组件的 $attrs 属性来实现指定：
<!-- My***ponent 模板使用 $attrs 时 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child ***ponent</span>
template
<My***ponent class="baz" />
3. 列表渲染
v-for 与对象
你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
const myObject = reactive({
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
})
<ul>
<li v-for="value in myObject">
{{ value }}
</li>
</ul>
(value, key, index) 三个参数分别表示（值，键，索引）。
v-for 可以直接接受一个整数值。
<span v-for="n in 10">{{ n }}</span>
// 1~10
通过 key 管理状态
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
数组变化侦测
Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
数组过滤
const numbers = ref([1, 2, 3, 4, 5])
const evenNumbers = ***puted(() => {
return numbers.value.filter((n) => n % 2 === 0)
})
变更原始数组
在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本：
- return numbers.reverse()
+ return [...numbers].reverse()
4. 生命周期钩子
5. 模块引用
使用了 <script setup> 的组件是默认私有的：一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露。
Good night~（2024年2月18日22:18）
继续复习 vue3 文档 （2024年2月19日）
6.组件基础
组件命名
在单文件组件中，推荐为子组件使用 PascalCase 的标签名。
如果你是直接在 DOM 中书写模板，你应该需要使用 kebab-case 形式并显式地关闭这些组件的标签。
传递 props
defineProps 是一个仅 <script setup> 中可用的编译宏命令，并不需要显式地导入。
监听事件
组件实例提供了一个自定义事件系统。父组件可以通过 v-on 或 @ 来选择性地监听子组件上抛的事件。
子组件可以通过调用内置的 $emit 方法，通过传入事件名称来抛出一个事件。
关闭标签
Vue 的模板解析器支持任意标签使用 /> 作为标签关闭的标志。
然而在 DOM 内模板中，我们必须显式地写出关闭标签：
<my-***ponent></my-***ponent>
7. props
单向数据流
所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。
在大多数场景下，子组件应该抛出一个事件来通知父组件做出改变。
