传送门
Vue3入门到精通-setup
Vue3入门到精通 -reactive 以及reactive相关函数
ref 以及 ref相关函数
- 将基础数据 --> 响应式数据 == 把值类型的数据包装编程响应式的引用类型的数据。
- 函数
- 通过返回值的value属性获取响应式的值，修改也需要对.value进行修改。
- 获取元素
- 在Vue2.x通过给元素添加 ref ='XXX',然后使用refs.xxx的方式来获取元素。
- 在VUe3.x中我们也可以通过ref来获取元素。
创建变量
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value = 2
console.log(count.value) // 2
在单文件组件中，不必写value，因为setup方法会自动解析。
<template>
<div>
<span>{{ count }}</span>
<button @click="count ++">Increment count</button>
</div>
</template>
<template>
<div ref="refDiv">我是div</div>
</template>
<script>
import {ref, onMounted} from 'vue';
export default {
name: 'App',
setup() {
let refDiv = ref(null);
onMounted(()=>{
console.log('onMounted',refDiv.value);
// onMounted <div style="color: red;">我是div</div>
refDiv.value.style.color="red"
// 字体颜色变成红色
});
// setup 生命周期在mounted之前
console.log(refDiv.value);
// null
return {refDiv};
}
}
</script>
和 
区别
- ref是把值类型添加一层包装，使其变成响应式的引用类型的值。
- reactive 则是将引用类型的值变成响应式的值。
-
: 是否需要添加一层引用包装。
- 本质上: ref(0) 等价于 reactive({value:0})
ref 对于 
- ref - 创建出来的数据 和以前无关(复制)与js中的 基本类型 表现一致
let a = 1;
let aRef = ref(a);
console.log(a, aRef.value); // 1 1
a = 2;
console.log(a, aRef.value); // 2 1
aRef.value = 3;
console.log(a, aRef.value); // 2 3
ref 对于 
- ref-创建出来的数据和以前相关（引用） 与js中的 引用数据类型 表现一致
let obj = { name: "1" };
let stateRef = ref(obj);
console.log("obj", obj.name);
console.log("ref", stateRef.value.name);
// obj 1
// ref 1
stateRef.value.name = '2';
console.log("obj", obj.name);
console.log("ref", stateRef.value.name);
// obj 2
// ref 2
obj.name='3'
console.log("obj", obj.name);
console.log("ref", stateRef.value.name);
// obj 3
// ref 3
相关API
作用
- 判断是否都是ref对象
- 其实内部是判断数据对象上是否包含__v_isRef 属性并且其值为 true。
用法
const a = ref(a)
const b = 'b'
cosnole.log(isRef(a)) // true
console.log(isRef(b)) // false
- 如果参数为 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val。
// isRef 判断是否为ref对象
const info = ref({name :'名字',info:{age:18,height:1111,}})
const infos = {name :'名字',info:{age:18,height:1111, }}
console.log(isRef(info)) // true
console.log(isRef(infos)) // false
console.log(unref(info)) // Proxy {name: '名字', info: {…}}
console.log(unref(infos))// {name: '名字', info: {…}}
- isRef(info) ? info.value : 'info' 等同unref(info)
作用
- 将 引用数据类型 转换为 ref 数据类型。
- 将 reactive 数据类型转换为 ref 数据类型。
用法
引用数据类型
let obj = { name: "syl", age: "123" };
let stateToref = toRef(obj, "name"); // 将name拿出来
stateToref.value = "zs";
console.log("obj", obj.name);
console.log("ref", stateToref.value);
// obj zs
// ref zs
obj.name = "ls";
console.log("obj", obj.name);
console.log("ref", stateToref.value);
// obj ls
// ref ls
reactive 数据类型
let obj = reactive({ name: "syl", age: "123" });
let stateToref = toRef(obj, "name"); // 将name拿出来
stateToref.value = "zs";
console.log("obj", obj.name);
console.log("ref", stateToref.value);
// obj zs
// ref zs
obj.name = "ls";
console.log("obj", obj.name);
console.log("ref", stateToref.value);
// obj ls
// ref ls
案例1
<p>toref----------{{ stateToref }}</p> // 这里显示的是zs
let obj = { name: "syl" };
let stateToref = toRef(obj, "name");
stateToref.value = "zs";
console.log("obj", obj.name);
console.log("ref", stateToref.value);
// obj zs
// ref zs
案例2
<p>toref----------{{ stateToref }}</p>
<button @click="changeToref">changeToref</button>
let obj = { name: "syl" };
let stateToref = toRef(obj, "name");
function changeToref() {
stateToref.value = "ls";
console.log("obj", obj.name);
console.log("toref", stateToref.value);
}
// 点击changeToref，页面没有任何变化，仍然显示syl
// console的结果是
// obj ls
// toref ls
一个有意思的案例
<p>toref----------{{ stateToref }}</p>
<p>temp----------{{ temp }}</p>
<button @click="changeToref">changeToref</button>
let obj = { name: "syl" };
let stateToref = toRef(obj, "name");
let temp = ref("我是ref");
function changeToref() {
temp.value = "我是ref我改变啦！";
stateToref.value = "ls";
}
// 点击按钮，页面的ui从
toref----------syl
temp----------我是ref
// 变成
oref----------ls
temp----------我是ref我改变啦！
这里可以看到ref触发了ui更新，导致toref的值也进行了更新
其实不把这个ref的更新写到这个函数里面，比如新建函数，也会导致这个现象
这个现象对其他函数也出现，例如shallowRef。
作用
批量转换。将响应式对象转换为普通对象,会将传入对象的每个属性处理为 ref 的值。
官方例子
- 当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行分解/扩散：
function useFeatureX() {
const state = reactive({
foo: 1,
bar: 2
})
// 返回时转换为ref
return toRefs(state)
}
export default {
setup() {
// 可以在不失去响应性的情况下破坏结构
const { foo, bar } = useFeatureX()
return {
foo,
bar
}
}
}
与 
创建一个 ref，它跟踪自己的
更改，但不会使其值成为响应式的。也就是对
进行更新
才会触发页面的更新，但是如果是一个引用数据类型，只对改引用数据进行值的修改，但不会触发更新。
基本数据类型
<p>{{ state1 }}</p>
<button @click="myFn1">基本数据类型</button>
let state1 = shallowRef(1);
function myFn1() {
state1.value = 2;
}
// 点击按钮，页面会显2
// 也就是对value进行修改可以触发页面更新
引用数据类型
<p>{{ state.a }}</p>
<p>{{ state.b.c }}</p>
<button @click="myFn1">引用数据类型-直接修改value</button>
<button @click="myFn2">引用数据类型-对数据进行修改</button>
let state = shallowRef({
a: "a",
b: {
c: "c",
},
});
function myFn1() {
state.value={
a: "a-new",
b: {
c: "c-new",
},
}
}
// 点击mufun1 页面从
a
c
// 变成
a-new
c-new
// 由此可以看出直接对value进行修改可以触发页面更新
function myFn2() {
state.value.a = "1";
state.value.b.c = "1";
console.log(state.value.a ， state.value.b.c )
}
// 点击mufun2 页面仍然显示
a
c
// console的结果是1 1
通常与shallowRef 一起使用，主要是主动触发界面更新的
参数是ref变量
<p>{{ state.a }}</p>
<p>{{ state.b.c }}</p>
<button @click="myFn2">使用triggerRef</button>
let state = shallowRef({
a: "a",
b: {
c: "c",
},
});
function myFn2() {
state.value.a = "1";
state.value.b.c = "1";
triggerRef(state);
}
// 点击mufun2 页面变成
1
1
自定义ref
返回一个ref对象,可以显式地控制依赖追踪和触发响应
<template>
<div>
<p>{{age}}</p>
<button @click="myFn">按钮</button>
</div>
</template>
import {ref, customRef} from 'vue';
function myRef(value) {
return customRef((track, trigger)=>{
return {
get(){
track(); // 告诉Vue这个数据是需要追踪变化的
console.log('get', value);
return value;
},
set(newValue){
console.log('set', newValue);
value = "我的年龄==="+newValue;
trigger(); // 告诉Vue触发界面更新
}
}
});
}
setup() {
// let age = ref(18); // reactive({value: 18})
let age = myRef(18);
function myFn() {
age.value += 1;
}
return {age, myFn}
}
}
// 页面显示的是18
// 点击button按钮后，变成了我的年龄===19
// 注意点:
// 不能在get方法中发送网络请求
