学习随笔

学习随笔（Vue3）

• 该随笔是根据b站小满zs的Vue3 + vite + Ts + pinia + 实战 + 源码 +electron的视频学习写的，Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

1. v-text 可以支持元素标签，但不支持组件
2. v-on(@)可以进行动态切换，例：

@[eventName] = 'functionName' 
const eventName = 'click';

3. ref的用处
   在vue2里面，ref是用于获取元素标签的（以我目前的理解），而在vue3里面也可以用来包裹响应式数据的。

import {ref} from 'vue';  // 这个是引用ref
import type {Ref} from 'vue';  // 这个是引用类型更复杂的ref

// 我们可以使用泛型声明被包裹的数据类型
type M = {
 name: string,
 age: number
};
// const man:Ref<M> = ref({name:'圆子', age: 23}); 这是Ref的写法
// const man = ref<M>({name: '圆子', age: 23}); 这是ref的写法
// 也可以不声明类型，让ref自行判断类型
const man = ref({name: '圆子', age: 23});

const change = ()=>{
 // 当使用ref包裹时，改变数据时应当加入.value，无论什么数据
 man.value.name = '圆子同学';
 man.value.age = 100;
}

在vue3中获取标签dom的方式

<div ref="dom"></div>

import {ref} from 'vue';

// 此处的变量名必须和标签上的ref名称一致才可以
// 如果使用ref获取dom树，则需要写一个泛型，定义ref的类型
const dom = ref<HTMLDivElement>();

// ?. 可选字符
console.log('dom',dom.vale?.innerText)

此处正好需要了解一下可选字符，可选字符（Optional Characters）是指在正则表达式中使用的特殊字符或模式，表示它们可以出现也可以不出现。

下面是一些常见的可选字符：

1. ?：表示前面的字符或模式是可选的，可以出现 0 次或 1 次。
   例如，colou?r 可以匹配 “color” 或 “colour”。

2. *：表示前面的字符或模式可以出现 0 次、1 次或多次。
   例如，ab*c 可以匹配 “ac”、“abc”、“abbc”、“abbbc” 等。

3. +：表示前面的字符或模式可以出现 1 次或多次，但至少出现 1 次。
   例如，ab+c可以匹配 “abc”、“abbc”、“abbbc” 等，但不能匹配 “ac”。

4. {n}：表示前面的字符或模式必须出现 exactly n 次。
   例如，a{3} 可以匹配 “aaa”，但不能匹配 “aa” 或 “aaaa”。

5. {n,}：表示前面的字符或模式至少出现 n 次。
   例如，a{2,} 可以匹配 “aa”、“aaa”、“aaaa” 等。

6. {n,m}：表示前面的字符或模式可以出现 n 到 m 次。
   例如，a{2,4} 可以匹配 “aa”、“aaa”、“aaaa”，但不能匹配 “a” 或 “aaaaa”。

这些可选字符可以用于正则表达式模式的构建，用于控制匹配的灵活性和数量的限制。

4. isRef 的用处
   isRef 用来判断该数据是不是一个ref对象，同样，使用这个isRef需要通过import {isRef} from 'vue'来引入，例：const man = ref({name: '圆子'}); console.log(isRef(man));，这样就可以判断这个数据是不是ref对象了。
5. shallowRef 的用处
   ref一般用于深层次的相应，而shallowRef一般用于浅层次的相应。shallowRef只指到.value里面，不会再深入。例如：

import {ref,shallowRef} from 'vue';

const man = ref({name: '圆子1'});
const man2 = shallowRef({name: '圆子2'});

const change = () => {
 // 当使用ref时，我们可以指到.value里面的内容
 man.value.name = '圆子同学1';
 // 当使用shallowRef时，我们只能指到.value
 man.value = {
  name: '圆子同学2',
 };
};

注意：ref与shallowRef是不可以一块去写的，ref会影响到shallowRef的修改，造成视图更新
6. triggerRef 的用处
triggerRef会强制ref更新，一般用于shallowRef中，例如：

import {triggerRef,shallowRef} from 'vue';

const man = shallowRef({name: '圆子'});

const change = () => {
 man.value.name = '圆子同学';
 // 在使用shallowRef 更新深层次的数据时，可以使用triggerRef强制视图更新，从而达到ref的效果
 triggerRef(man);
};

7. customRef 的用处
   customRef是自定义ref，一般用于防抖，例：

import {customRef} from 'vue';

function MyRef<T>(value:T){
 let timer: any;
 return customRef((track,trigger) => {
  return {
   get (){
    // track的作用就是收集依赖
    track();
    return value;
   },
   set (newValue){
    clearTimeout(timer);
    timer = setTimeout(() => {
     value = newValue;
     timer = null;
     // trigger的作用就是触发依赖更新
     trigger(); 
    },500)
   }
  }
 })
} 

const obj = MyRef<string>('圆子');

const change = () => {
 obj.value.name = '圆子同学';
};

8. 在vue3中允许开发者在<template></template>标签里写入多个标签，具体例子如下：
   vue2:

<template>
 <div>
  <p>123</p>
 </div>
</template>

vue3:

<template>
 <div>
  <p>123</p>
 </div>
 <div>
  <p>123</p>
 </div>
</template>

9. 在vue3中应当使用setup来代替之前的 data、methods、computed、watch 等选项。

<script setup lang='ts'>
 const PI = 3.1415926;
</script>

或者

<script lang='ts'>
export default {
 setup(){
  const PI = 3.1415926;

  return{
   PI,
  }
 }
}
</script>

10. reactive 的作用
    reactive与ref类似，都是实现组件的数据响应式更新，但是reactive用于定义更复杂的类型。
    ref支持所有的类型 reactive引用类型：Array,Object,Map,Set。 reactive同样可以使用泛型定义数据类型
    ref取值，赋值都需要加.value，reactive是不需要的。
    reactive 不能直接赋值，否则会破坏响应式对象的，解决方法就是在需要改变的数组上
    shallowReactive 与 shallowRef 类似，都是用于浅层次的相应。reactive与shallowReactive也是不能在一起使用的

import {ref,reactive} from 'vue';

type M = {
 name:string,
 age:number,
};

const man = reactive<M>({
 name:'圆子',
 age:23
});

man.age = 18;

11. toRef,toRefs,toRaw 的作用
    toRef 只能修改响应式对象的值 非常响应式视图毫无变化 只适用于相应式对象

import {reactive,toRef,toRefs} from 'vue';

const man = reactive({name:'圆子',age:23,like:'黑丝美女'});
// toRef 的用法是第一个参数为要修改的对象，第二个参数为要修改的key
// 对于toRef常用的用法场景就是，如果有函数需要一个ref数据，但是你的数据被reactive包裹，那就可以用toRef提取相应的数据
const like = toRef(man,'like');

const change = () => {
 // 这样修改，不会导致视图更新，所以我们应该在对象上加入reactive进行包裹，做到响应式数据
 like.value = '长腿美女';
}

toRefs 只能修改对象，把里面每一个属性都变成ref属性

import {reactive,toRefs} from 'vue';

const man = reactive({name:'圆子',age:23,like:'黑丝美女'});

const toRefs = <T extends object>(object:T) => {
 const map:any = {};

 for (let key in object){
  map[key] = toRef(object,key)
 };

 return map;
}

let {name,age,like} = toRefs(man); 

const change = () => {
 name.value = '圆子同学';
 console.log(name,age,like);
}

toRaw 的作用就是消除响应式对象的响应式，让对象不再响应式。用法：toRaw(响应式对象)
12. 在JS中，计算累加值，可以使用for循环，但是JS提供了一个更简洁的函数，arr.reduce()函数。
参数如下：

interface Data{
 name:string,
 num:number,
};

let arr = reactive<Data[]> ([
 {
  name:'圆子同学',
  num:1
 },
 {
  name:'圆子同学',
  num:2
 }
])

// 这里的参数分别为 total:初始值，或者计算后的返回值（必需）；currentValue:当前元素（必需）；
// currentIndex:当前元素的索引；arr:当前元素所属的数据对象；0:可选，传递给函数的初始值
arr.reduce((total:number,currentValue:Data,currentIndex,arr) => {
 return total + currentValue.num * 100;
},0)