一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
上一篇忘记了，这次贴上我的学习网站 vue3
本文接着上一篇继续学习vue2基础之上的vue3，介绍且自己学习的方法都是一些比较常用的方法，更多生僻方法请移步到上方链接进行了解学习。
reactive()
-
介绍: 需要传入数组或者对象等复杂数据类型，双向绑定复杂数据类型时推荐使用reactive，当双向绑定基本数据类型时推荐使用ref 。
下面来个小例子简单介绍一下：
<script setup lang="ts">
import { reactive } from 'vue'
// 模拟异步接口赋值操作的两种方法
// 第一种
type U = {
list: number[]
}
let mesg = reactive<O>({
list: []
})
setTimeout(() => {
mesg.list = [1, 2, 3, 4, 5]
}, 1000)
// 第二种
let mesg = reactive<number[]>([])
setTimeout(() => {
let arr = [1, 2, 3, 4, 5]
// mesg = arr; 如果这样赋值会破坏mesg的响应式
mesg.push(...arr); // 这样就会赋值成功了
}, 1000)
</script>
readonly()
- 介绍: 字面意思只读，实际上时复制一份proxy对象，将其设置为只读。简单来说就是用readonly包裹的对象是没办法进行内部值的修改的。
shallowReactive()
-
介绍：仅仅将第一层数据做成响应式，深层数据不是响应式，仅仅值会被改变但是不会被更新到页面上。需要注意的是当页面第一次挂载是可以被修改的，如果挂载后做修改是没有办法更新到视图的。
下面来个小例子简单介绍一下：
import { shallowReactive } from 'vue'
let mesg = shallowReactive({
name: 'jxx',
obj: {
obj1: {
obj2: {
sex: '女'
}
}
}
})
const click1 = () => {
mesg.name = 'jiang'
}
const click2 = () => {
mesg.obj.obj1.obj2.sex = '男'; // 此时只是值修改了，但是视图并没有更新
}
toRef()
-
介绍: 需要传入两个参数，第一个是对象 ，第二个是对象的属性名。作用是将对象中的某个属性变为响应式数据，如果修改响应式数据会影响到原始数据，这时可能会想到ref，ref的本质时复制拷贝，与原始数据没有什么关联。说回toRef,需要注意的是，如果我们修改的是通过toRef创建的响应式数据是不会触发UI界面的更新的。
下面来个小例子简单介绍一下：
import { toRef } from 'vue'
let obj = {name : 'jxx', age : 18};
let newObj= toRef(obj, 'name');
function handleClick(){
newObj.value = 'jiang';
console.log(obj,newObj)
}
上图中就是已经触发点击事件响应式数据和原始数据都已经发生改变，但是视图并没有发生更新。 使用场景：想让响应式数据与元数据关联并且不想更新到视图的时候。
toRefs()
-
介绍： 接收一个对象参数，原理是调用对象上的所有属性然后挨个调用toref执行。作用是批量设置多个数据为响应式数据，toRef一次仅能设置一个对象。可以利用torefs和reactive来实现复杂类型数据实时更新视图。
下面来个小例子简单介绍一下：
<template>
<div>
<button @click="handleClick">点击</button>
<p>{{count1}}</p>
<p v-for="(item, index) in arr" :key="index">{{item}}</p>
</div>
</template>
import { toRefs, reactive } from 'vue'
let obj = reactive({
count1: 1,
count2: 1,
arr: [1,2,3]
})
let { count1, count2, arr } = toRefs(obj)
const handleClick = () => {
count1.value++
count2.value++
arr.value = arr.value.map(item => {
return item +1
})
}
// 这种情况视图时可以更新的
toRaw()
-
介绍：简单概括就是将响应式数据变为原始数据，在日常开发中使用频次较低
这次的介绍和学习就到此结束了。。。
