vues ref reactive refs toRefs

一 ref

ref是什么

可以生成值类型（即基本数据类型）的响应式数据；,
值存在ref对象的value里, 通过value来修改值;
用于模板和reactive, 也可当做dom里的ref使用
ref 不仅可以用于响应式，还可以用于模板的 DOM 元素。
使用: let a = ref(1);
取值: a.value

<template><p ref="elemRef">今天是周一</p>
</template><script>
import { ref, onMounted } from 'vue'export default {name: 'RefTemplate',setup(){const elemRef = ref(null)onMounted(() => {console.log('ref template', elemRef.value.innerHTML, elemRef.value)})return{elemRef}}
}
</script>

二 reactive toRef toRefs

reactive是什么
让对象变成响应式的对象, reactive可直接对ref对象解包
使用: let a = reactive({name:1, age: 1})
取值: a.name,

注意: 如果对reactive响应式对象进行解构的话, 会失去响应式

正确用法: 使用toRef, toRefs

let a = reactive({name: 'aaa', age: 1});
return {...toRefs(a)
}let a = reactive({name: 'aaa', age: 1});
let b = toRef(a, 'age');
return {b
}

三最佳使用方式

用 reactive 做对象的响应式，用 ref 做值类型的响应式。
setup 中返回 toRefs(state) ，或者 toRef(state, ‘xxx’) 。
为了防止误会产生， ref 的变量命名尽量都用 xxxRef ，这样在使用的时候会更清楚明了。
合成函数返回响应式对象时，使用 toRefs

四深入理解

为什么需要用ref
值类型（即基本数据类型）无处不在，如果不用 ref 而直接返回值类型，会丢失响应式。
比如在 setup 、 computed 、合成函数等各种场景中，都有可能返回值类型。
Vue 如果不定义 ref ，用户将自己制造 ref ，这样反而会更加混乱。
为何ref需要.value属性
通过上面的分析我们知道， ref 需要通过 .value 来修改值。这看起来是一个很麻烦的操作，总是频繁的 .value 感觉特别琐碎。那为什么一定要 .value 呢？我们来揭开它的面纱。
ref 是一个对象，这个对象不丢失响应式，且这个对象用 value 来存储值。
因此，通过 .value 属性的 get 和 set 来实现响应式。
只有当用于 模板和 reactive 时，不需要 .value 来实现响应式，而其他情况则都需要。
为什么需要toRef和toRefs
与 ref 不一样的是， toRef 和 toRefs 这两个兄弟，它们不创造响应式，而是延续响应式。创造响应式一般由 ref 或者 reactive 来解决，而 toRef 和 toRefs 则是把对象的数据进行分解和扩散，其这个对象针对的是响应式对象而非普通对象。总结起来有以下三点：

初衷：在不丢失响应式的情况下，把对象数据进行 分解或扩散。
前提：针对的是响应式对象（ reactive封装的）而非普通对象。
注意：不创造响应式，而是延续响应式。

vues ref reactive refs toRefs相关推荐

vue中ref、reactive和 toRefs toRef
ref和reactive都是响应式的引用,其原理是通过 proxy 对数据进行封装,当数据变化时,触发模版等内容的更新, ref 处理基础类型的数据(string,number..),reactive ...
VUE3 reactive与toRefs函数
Vue3.0中还为我们提供了一个对象式响应的reactive函数 . Reactive函数创建一个响应式对象. 一:Reactive函数其实,在我看来,reactive函数就是VUE3.0为我们提 ...
vue3学习笔记（ref, reactive, setup, hook...）
目录一.搭建项目二.常用的Composition API 1.ref函数(实现响应式) 2.reactive函数 3.vue2和vue3响应式的区别 4. setup参数 5.计算属性和监视 6. ...
Vue中的 ref 和 $refs
官网解释: ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 ...
vue3——ref reactive函数
ref:定义一个响应式的数据使用方法:const xxx = ref(value) 修改时通过xxx.value = *** 修改例如 <template><h1>一个人的 ...
vue ref reactive
ref 接受一个内部值并返回一个响应式且可变的 ref 对象.ref 对象具有指向内部值的单个 property .value. 示例: const count = ref(0) console.lo ...
【收藏】Vue中ref和$refs的介绍及使用
实例(通过ref特性调用子组件的方法) [1]子组件code: <template><div>{{msg}}</div> </template>< ...
ref获取元素 vue 删除子元素_vue中的 ref 和 $refs
相信前端开发或者后端开发都用过jquery,因为不是数据驱动,为了获取某些元素的value值,都操作过Dom元素. // 使用Jquery获取Dom元素值$("#id").text ...
vue3.0 ref reactive nextTick watch toRaw defineProps defineEmits
目前使用的一些属性持续更新中 ref:推荐定义基本数据类型(ref值也可以是对象,但是一般情况下是对象直接使用reactive更合理). const data = ref( {id: "1& ...
Vue ref 和 $refs 获取元素宽高
Vue3当中获取方法一:借助 ref() 函数 (推荐) <div ref="box">我是div </div>import { ref,onMounte ...

vues ref reactive refs toRefs

一 ref

二 reactive toRef toRefs

三最佳使用方式

四深入理解

vues ref reactive refs toRefs相关推荐

最新文章

热门文章

vues ref reactive refs toRefs

一 ref

二 reactive toRef toRefs

三 最佳使用方式

四 深入理解

vues ref reactive refs toRefs相关推荐

最新文章

热门文章

三最佳使用方式

四深入理解