Vue3入门到精通--ref以及ref相关函数

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

---------------------------------------------------------------



### []( )isRef



#### []( )作用



判断是都是ref对象



> 其实内部是判断数据对象上是否包含`__v_isRef` 属性并且其值为 `true`。



#### []( )用法

const a = ref(a)

const b = ‘b’

cosnole.log(isRef(a)) // true

console.log(isRef(b)) // false

### []( )unref



如果参数为 [`ref`]( )，则返回内部值，否则返回参数本身。这是 `val = isRef(val) ? val.value : val`。

const temp=ref(3)

const newTemp = unref(1) // newTemp 确保现在是数字类型 3

const a = unref(1) // a 确保现在是数字类型 1

### []( )toRef



#### []( )作用



> 将**引用数据类型**转换为ref数据类型

> 

> 将reavtive数据类型转换为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

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 }}

<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。

### []( )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对象,可以显式地控制依赖追踪和触发响应

<p>{{age}}</p>

<button @click="myFn">按钮</button>

import {ref, customRef} from ‘vue’;

function myRef(value) {

return customRef((track, trigger)=>{

return {

  get(){

    track(); // 告诉Vue这个数据是需要追踪变化的

    console.log('get', value);

    return value;

  },

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
.log(‘get’, value);

    return value;

  },

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-U8xp2Jrt-1714993196805)]

[外链图片转存中…(img-dW0qYS0s-1714993196805)]

[外链图片转存中…(img-5GtAQ1GH-1714993196806)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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