今天这篇我们来学习和了解“Vue框架中ref和reactive的用法是怎样的”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“Vue框架中ref和reactive的用法是怎样的”有一定的帮助。有这方面学习需要的朋友就继续往下看吧！

一、ref和reactive

死死记住：ref本质也是reactive，ref(obj)等价于reactive({value: obj})

• vue3中实现响应式数据的方法是就是使用ref和reactive，所谓响应式就是界面和数据同步，能实现实时更新
• vue2中响应式是通过defineProperty实现的，vue3中是通过ES6的Proxy来实现的

1.reactive

• reactive的参数必须是一个对象，包括json数据和数组都可以，否则不具有响应式
• 如果给reactive传递了其他对象（如时间对象），默认情况下修改对象界面不会自动更新，如果想更新，可以通过给对象重新赋值来解决

2.ref

既然有了reactive，为何还要ref呢？当我们只想让某个变量实现响应式的时候，采用reactive就会比较麻烦，因此vue3提供了ref方法进行简单值的监听，但并不是说ref只能传入简单值，他的底层是reactive，所以reactive有的，他都有。还是那句老话：

死死记住：ref本质也是reactive，ref(obj)等价于reactive({value: obj})

• 在vue中使用ref的值，不用通过.value获取
• 在js中使用ref的值，必须通过.value获取

二、shallowRef和shallowReactive

递归监听和非递归监听
ref和reactive都属于递归监听，也就是数据的每一层都是响应式的，如果数据量比较大，非常消耗性能，非递归监听只会监听数据的第一层。

1. ref和shallowRef

• ref定义的数据每一层都是响应式数据
• shallowRef定义的数据，只有第一层是响应式的，即只有在更改.value的时候才能实现响应式

let age = ref({
      a: '1',
      f: {
        b: '2',
        s:{
          c: '3'
        }
      }
    })
//打印各层数据
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);

let age = shallowRef({
      a: '1',
      f: {
        b: '2',
        s:{
          c: '3'
        }
      }
    })
//打印各层数据
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);

使用shallowRef后，可以通过triggerRef()方法主动更新界面，实现界面刷新

function doSome(){
  age.value.f.s.c = 'c';
  //主动更新界面
  triggerRef(age);
}

2. reactive和shallowReactive

注意：shallowReactive没有类似triggerRef()的方法

三、toRaw

toRaw的出现是解决什么问题呢？

有些时候我们不希望数据进行响应式实时更新，可以通过toRaw获取ref或reactive引用的原始数据，通过修改原始数据，不会造成界面的更新，只有通过修改ref和reactive包装后的数据时才会发生界面响应式变化。

let obj1 = {...};
//state和obj1是引用关系，state的本质是一个Proxy对象，其中引用了obj1
let state = reactive(obj1);
//通过toRaw方法获取到原始数据，其实是获取到obj1的内存地址，obj2和obj1是完全相等的
let obj2 = toRaw(state)
console.log(obj1 === obj2);//true

有些同学会问，那直接使用obj1来修改数据不就行了吗？可关键是我们在使用reactive定义数据时一般不会先定义一个obj，再将他传给reactive，都是直接在reactive中写数据的。

四、markRaw

与toRaw不同，markRaw包装后的数据永远不会被追踪！

暂时没发现有什么用处(手动狗头)

let obj1 = {name: "lijing", age: 18}
let obj2 = markRaw(obj1);
//此时reactive包装的数据虽然是响应式对象，但是不会被跟踪，也不会产生效应式效果
let state1 = reactive(obj2)

console.log(obj1 === obj2);//true

五、toRef和toRefs

ref和toRef都是用来构造响应式数据，两者有什么区别呢，看两个例子

1. ref

复制，修改响应式数据不会影响以前的数据，数据发生改变界面就会自动更新

转换后的是一个RefImpl类型

可以看到，使用ref对一个对象的某个简单数据类型属性进行响应式改造后，通过修改响应式数据不会影响到原始数据，如上图中，通过state1修改值后，obj1中的a属性值没有发生变化。这里有个注意点：修改的这个属性必须是简单数据类型，一个具体的值，不能是引用，如果该属性也是一个对象，则会影响，因为对象--->引用！

例如上面例子中，如果传入state1的是obj1.f，则情况完全不同

//等价于let state1 = ref({b: '2',s: {c: '3'}})
// 又等价于--->let state1 = reactive({value: {....}}})
let state1 = ref(obj1.f);

2.  toRef

如果使用toRef来转换，则修改响应式数据会影响到原始数据，数据发生改变，但是界面不会自动更新

转换后的是一个ObjectRefImpl类型

ref类似深拷贝，toref类似浅拷贝

3.  toRefs

遍历对象中的所有属性，将其变为响应式数据，这是因为toRef只能传一个key，toRefs所达到的效果与toRef一样

tips:目前用的最多的还是ref和reactive，其他东西一般是后期用来改善性能使用的。

总结

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"Vue框架中ref和reactive的用法是怎样的"的内容，大家可以关注群英网络的其它相关文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 如何理解node.js异步生成器，要点有哪些

  这篇文章主要给大家介绍了关于Node.js中异步生成器与异步迭代的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• vue项目出现缩进报错的问题怎样解决

  idea编译器出现Vue缩进报错，怎么解决呢，很多朋友遇到这个问题都很棘手，不知该如何解决，今天小编给大家通过场景分析介绍解决方案，需要的朋友参考下吧

• 基于vue框架实现的全选功能代码是什么

  这篇文章主要为大家详细介绍了vue实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 如何执行和使用JS匿名函数，主要作用是什么

  匿名函数顾名思义指的是没有名字的函数，在实际开发中使用的频率非常高，也是学好JS的重点。下面本篇文章就来给大家详细介绍一下JavaScript中的匿名函数，希望对大家有所帮助！

• react拖动组件代码详解

  本文主要介绍了react拖拽组件react-sortable-hoc的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧