vue3的ref、isRef、toRef、toRefs、toRaw怎么用
时间:2023-05-11 00:34
ref 属性除了能够获取元素外,也可以使用 ref 函数,创建一个响应式数据,当数据值发生改变时,视图自动更新。 检查变量是否为一个被 ref 包装过的对象,如果是返回 true ,否则返回 false。 创建一个 ref 对象,其 value 值指向另一个对象中的某个属性。 toRef(obj, key) 将对象中的某个值转化为响应式数据,分为两种情况: toRef 定义原始非响应式数据,修改值时,原始数据和 copy 数据都会变的,但是视图不更新。 注意:如果是在 DOM 挂载之前调用 chang 方法,改变数值,此时数据和视图都会发生改变。 toRef 定义原始数据响应式数据,修改值时,原始数据,和 copy 数据都会改变,视图也会更新。 最终值为 “李四”。 toRefs 用来解构 ref、reactive 包裹的响应式数据。接收一个对象作为参数,遍历对象上的所有属性,将对象上的所有属性变成响应式数据。 toRefs 解构数据时,如果某些参数作为可选参数,可选参数不存在时就会报错,如: 此时可以使用 toRef 解决此问题,使用 toRef 解构对象某个属性时,先检查对象上是否存在该属性,如果存在就继承对象上的属性值,如果不存在就会创建一个。 修改上边的代码为: 将响应式对象转为原始对象。做一些不想被监听的事情,从 ref 或 reactive 得到原始数据。 修改原响应式数据时,toRaw 转换得到的数据会被修改,视图也会更新,如: 如果修改 toRaw 得到的原始数据,原数据也会被修改,但是视图不更新。如: 以上就是vue3的ref、isRef、toRef、toRefs、toRaw怎么用的详细内容,更多请关注Gxl网其它相关文章!1、ref
<script lang="ts" setup>import { ref } from 'vue'let str: string = ref('我是张三')const chang = () => { str.value = '我是钻石王老五' console.log(str.value)}</script><template> <div> {{ str }} <button type="button" @click="chang">修改值</button> </div></template>
2、isRef
import { ref, isRef, reactive } from 'vue'let str: string = ref('我是张三')let num: number = 1let per = reactive({ name: '代码女神', work: '程序媛' })console.log('strRes', isRef(str)) //trueconsole.log('numRes', isRef(num)) //falseconsole.log('perRes', isRef(per)) //false
3、toRef
<script> import { ref, isRef, toRef, reactive } from 'vue'let obj = { name: '姓名', age: 18,}let name: string = toRef(obj, 'name')const chang = () => { obj.name = '钻石王老五' name.value = '李四' console.log(obj.name) // 李四 console.log('name', name) // 李四}//chang() //DOM挂载前调用</script><template> <div> {{ obj.name }} ------- {{ name }} <button type="button" @click="chang">修改值</button> </div></template>
<script> import { ref, isRef, toRef, reactive } from 'vue'let obj = reactive({ name: '姓名', age: 18,})let name: string = toRef(obj, 'name')const chang = () => { obj.name = '钻石王老五' name.value = '李四'}</script><template> <div> {{ obj.name }} ------- {{ name }} <button type="button" @click="chang">修改值</button> </div></template>
4、toRefs
let obj = reactive({ name: '姓名', age: 18,})let { name, age } = toRefs(obj)const chang = () => { name.value = '钻石王老五' age.value++}</script><template> <div> {{ name }} ------- {{ age }} <button type="button" @click="chang">修改值</button> </div></template>
let obj = reactive({ name: '姓名', age: 18,})let { name, age, work } = toRefs(obj)const chang = () => { name.value = '钻石王老五' age.value++ console.log('work', work.value) work.value = '程序媛'}
let obj = reactive({ name: '姓名', age: 18,})let { name, age } = toRefs(obj)let work = toRef(obj, 'work')const chang = () => { name.value = '钻石王老五' age.value++ console.log('work', work.value) work.value = '程序媛'}
5、toRaw
<script lang="ts" setup>import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'let obj = reactive({ name: '姓名', age: 18,})let newObj = toRaw(obj)const chang = () => { obj.name = '钻石王老五' obj.age++}</script><template> <div> {{ obj.name }} ------- {{ obj.age }} <button type="button" @click="chang">修改值</button> <br /> {{ newObj }} </div></template>
<script lang="ts" setup>import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'let obj = reactive({ name: '姓名', age: 18,})let newObj = toRaw(obj)const chang = () => { obj.name = '钻石王老五' obj.age++}const changNew = () => { newObj.name = '搞笑' console.log('newObj', newObj) console.log('obj', obj)}</script><template> <div> {{ obj.name }} ------- {{ obj.age }} <button type="button" @click="chang">修改值</button> <br /> {{ newObj }} <button @click="changNew">修改</button> </div></template>