vue3 ref、reactive、toRef、toRefs 使用

ref、reactive、toRef、toRefs 使用

 

触发页面更新(ref,reactive)

ref ： 复制，修改响应式数据不会影响原始数据 ，一次只能定义一个ref响应式数据

let age = ref(20);//响应式数据,ui更新

响应式原理：ref 则是用把数据给包装成 ref 对象, .value 的方式去访问其数据,在 setup 中吗,在模板中不需要, 因为会自动添加.value。vue 强烈建议 ref 用来处理 非指针类型的数据类型, string number 等, 通过给 value 属性添加 getter/setter 来实现对数据的劫持

 

reactIve：用来处理对象，数组，等指针类型的数据

响应式原理：reactive 是利用 proxy 来实现

• ref可用于任何类型的数据创建响应式，reactive(obj|array)只用于创建引用类型数据的响应式。

<template>
    <div>
        <div @click="name='李四'">{{name}}</div>
        <div @click="age=21">{{age}}</div>
    </div>
</template>
<script>
import { reactive, ref, toRefs } from 'vue';
export default {
    name:'Page2',
    setup(){
        const state = reactive({
            name:"张三",
            age:20
        })
        return{
            ...toRefs(state)//解构赋值后数据就会失去响应式，需要用toRefs让对象拥有ref响应式属性，UI才会视图更新
        }
    }
}

不会触发页面更新（toRef,toRefs）

toRef:

使用toRef将某个对象中的属性变成响应式数据，修改响应式数据是会影响到原始数据的。但是需要注意，如果修改通过toRef创建的响应式数据，并不会触发UI界面的更新。 所以，toRef的本质是引用，与原始数据有关联

import {toRef} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= toRef(obj, 'name');
    function change(){
      newObj.value = 'Tom';
      console.log(obj,newObj)
    }
    return {newObj,change}
  }
}

上述代码，当change执行的时候，响应式数据发生改变，原始数据obj并不会改变，但是UI界面不会更新

上面两个介绍了，ref 和 reactive 可以改变页面。接下来这两个则不能去改变页面，但是数据还是会遵循响应式。

小结：

ref和toRef的区别、特点： (1). ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据 (2). ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新 (3). toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性

(4).toRef 用于创建对象指定的属性响应式，换句话说就是只能控制一个对象中的一个属性。

(5).toRefs 用于创建对象响应式。

(6).他们对响应式的处理你可以理解为： toRef 类似 ref， toRefs 类似 reactive

类型	是否触发页面改变	是否可以结构
ref	是	否
reactive	是	否
toRef	否	否
toRefs	否	是