首页 > 建站教程 > 前端框架 >  vue3 ref和reactive的区别正文

vue3 ref和reactive的区别

一,前言

ref和reactive是vue3基于组合式api模式下,在setup中用于声明的具有响应式的数据的方法。


二,ref

1.ref通常用于声明基础类型响应式数据。

import {ref} from 'vue'
const age =ref(10) //声明响应式数据


2.ref返回的是被包装过的响应式对象,在setup中访问和修改ref需要使用.value属性

age.value=21


3.在模板中使用时无需使用.value,直接使用即可

<div>{{age}}</div>


4.当ref数据作为props传递给子组件的时候,在子组件里需要使用toRef或者toRefs建立引用,否则数据不是响应式的,在子组件里修改这个ref,会同时修改作为props传入的ref。


三,reactive

1.reactive用于声明复杂类型响应式数据。

import {reactive} from 'vue'
const man=ref({name:'jolin',age:21}) //声明响应式数据


2.reactive返回的是被包装过的响应式对象,在setup中访问和修改直接使用属性即可

man.age=20


3.声明时未定义,动态添加的属性也会是响应式的

man.weight = '50kg' //weight具有响应性


4.在模板中使用属性的形式

<div>{{man.name}}</div>


5.将reactive声明的响应式数据传递给子组件时,在子组件可以直接使用。


6.当ref的值是数组时,我们可以通过索引来修改数组值是响应式的。


四,注意事项

    1.注意ref作为props传递给组件时,类型是Object

    2.注意不能解构reactive数据,解构出的数据会失去响应式。

    3.在任何地方访问响应式数据都能拿到最新的。

    4.同vue2的data,只有数据被应用到模板中时,数据的改变才会触发updated生命周期,否则即使数据被修改了,也不会触发updated生命周期,导致视图不更新。