Vue3入门到精通--ref以及ref相关函数，做了6年前端开发

console.log(“obj”, obj.name);

console.log(“ref”, stateToref.value);

// obj ls

// ref ls

注意点

数据发生改变, 界面也不会自动更新

案例1

toref----------{{ stateToref }}

// 这里显示的是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

toref----------{{ stateToref }}

<button @click=“changeToref”>changeToref

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

---

一个有意思的例子

toref----------{{ stateToref }}

temp----------{{ temp }}

<button @click=“changeToref”>changeToref

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。

toRefs

作用

批量转换。将响应式对象转换为普通对象,会将传入对象的每个属性处理为 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

}

}

}

shallowRef 与triggerRef

作用

shallowRef

创建一个 ref，它跟踪自己的 .value 更改，但不会使其值成为响应式的。也就是对value进行更新

才会触发页面的更新，但是如果是一个引用数据类型，只对改引用数据进行值的修改，则不会触发更新。

案例- 基本数据类型

{{ state1 }}

<button @click=“myFn1”>基本数据类型

let state1 = shallowRef(1);

function myFn1() {

state1.value = 2;

}

// 点击按钮，页面会显2

// 也就是对value进行修改可以触发页面更新

案例- 引用数据类型

{{ state.a }}

{{ state.b.c }}

<button @click=“myFn1”>引用数据类型-直接修改value

<button @click=“myFn2”>引用数据类型-对数据进行修改

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

triggerRef

通常与shallowRef 一起使用，主要是主动触发界面更新的

参数是ref变量

{{ state.a }}

{{ state.b.c }}

<button @click=“myFn2”>使用triggerRef

let state = shallowRef({

a: “a”,

b: {

c: “c”,

},

});

function myFn2() {

state.value.a = “1”;

state.value.b.c = “1”;

triggerRef(state);

}

// 点击mufun2 页面变成

1

1

customRef

自定义ref

返回一个ref对象,可以显式地控制依赖追踪和触发响应

{{age}}

<button @click=“myFn”>按钮

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}

}

}

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

-OWtLcJqF-1711010924188)]
[外链图片转存中…(img-hzuWuRMI-1711010924189)]
[外链图片转存中…(img-M5IBHf73-1711010924190)]
[外链图片转存中…(img-EDRzG7ab-1711010924190)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-UKYE92V8-1711010924191)]

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】