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

是什么

1. 将基础数据–>响应式数据 ==> 把值类型的数据包装编程响应式的引用类型的数据

2. 函数

3. 通过返回值的 value 属性获取响应式的值 ，修改也需要对 .value进行修改。

4. 获取元素

   在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

ref也可以接收复杂的数据类型作为参数，只是建议不使用ref处理复杂类型数据。

在单文件组件中，不必写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(box.value);
        // null

        return {box};
    }
}
</script>

ref和reactive的区别

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

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

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

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进行更新

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

案例- 基本数据类型

<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

triggerRef

通常与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

customRef

自定义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方法中发送网络请求