1 使用reactive 实现数据的响应式

<template>
<div>
<h2>toRef的使用</h2>
<p> 姓名:{{state.name }} </p>
<p>年龄:{{ state.age }} </p>
<button @click="changeHander">改变内容</button>
</div>
</template>
<script>
import { reactive } from "vue"
export default {
name: "App",
setup() {
let state=reactive({
name:'李四',
age:40
})
function changeHander(){
state.name="李四222"
state.age=80
}
return {state,changeHander}
}
};
</script>
虽然上面可以使用数据的响应式。
但是有时属性值很多,
可能有达到几十个值。
这样在视图上一个个属性点(.) 会很麻烦
可不可以不通过点也能够正常的去渲染和自动更新视图呢?
这个时候,机智的小伙伴们可能就想到到解构
那么我们来尝试一下。

2.使用解构

<template>
<div>
<h2>toRef的使用</h2>
<p> 姓名:{{name }} </p>
<p>年龄:{{ age }} </p> <button @click="changeHander">改变内容</button>
</div>
</template>
<script>
import { reactive } from "vue"
export default {
name: "App",
setup() {
let state=reactive({
name:'李四',
age:40
})
function changeHander(){
state.name="李四222"
state.age=80
}
// ...state虽然我们通过解构的方式。不要在视图上进行点了。但是数据却没有响应
return {...state,changeHander}
}
};
</script>
我们发现使用解构视图并没有改变。
说明使用解构不行。
这个时候我们今天的主角toRefs就登场了
toRefs 可以把一个响应式对象转换为普通的对象。
该普通对象的每一个值都是ref。
由于变成了ref,所以我们需要使用value。
赶紧往下看看

3. 初次使用toRefs

<template>
<div>
<h2>toRef的使用</h2>
<p> 姓名:{{name }} </p>
<p>年龄:{{ age }} </p>
<button @click="changeHander">改变内容</button>
</div>
</template>
<script>
import { reactive, toRefs } from "vue"
export default {
name: "App",
setup() {
let state=reactive({
name:'李四',
age:40
})
// toRefs 可以把一个响应式对象转换为普通的对象。
// 该普通对象的每一个值都是ref
// age: ObjectRefImpl {_object: Proxy, _key: "age", __v_isRef: true}
// name: ObjectRefImpl {_object: Proxy, _key: "name", __v_isRef: true}
let state2=toRefs(state);
console.log( 'state2==>ref',state2 )
function changeHander(){
// 由于变成了ref,所以我们需要使用value
state2.name.value="李四222"
state2.age.value=80
}
// ...state虽然我们通过解构的方式。不要在视图上进行点了。但是数据却没有响应
return {...state2,changeHander}
}
};
</script>

4.优化一下,在toRefs的时候进行解构

<template>
<div>
<h2>toRef的使用</h2>
<p> 姓名:{{name }} </p>
<p>年龄:{{ age }} </p> <button @click="changeHander">改变内容</button>
</div>
</template>
<script>
import { reactive, toRefs } from "vue"
export default {
name: "App",
setup() {
let state=reactive({
name:'李四',
age:40
})
// 这里进行了一次解构
let {name,age }=toRefs(state);
function changeHander(){
name.value="李四222"
age.value=80
}
return {name,age,changeHander}
}
};
</script>

5. toRefs 可以和 hook 进行搭配使用

<template>
<div>
<h2>toRef的使用</h2>
<p> 姓名:{{name }} </p>
<p>年龄:{{ age }} </p>
<button @click="changeHander">改变内容</button>
<h1>==========奥特曼信息==========</h1>
<p> 姓名:{{name1 }} </p>
<p>年龄:{{ age1 }} </p>
</div>
</template>
<script>
import { reactive, toRefs } from "vue"
export default {
name: "App",
setup() {
let state=reactive({
name:'李四',
age:40
})
// 这里进行了一次解构
let {name,age }=toRefs(state);
// 这样在视图上就直接使用值了
let {name1, age1}=useInfo();
function changeHander(){
name.value="李四222"
age.value=80
}
return {name,age,changeHander, name1, age1}
}
}; // 假设我定义的一个hook
function useInfo(){
let sate=reactive({
name1:"奥特曼",
age1:1000
})
//这里变成响应式并且解构
return { ...toRefs(sate) }
}
</script>

Vue3中toRefs的使用的更多相关文章

  1. vue3中使用axios如何去请求数据

    在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...

  2. vue3中watch函数

    watch 监听普通类型 let count = ref(1); const changeCount = () => { count.value+=1 }; watch(count, (newV ...

  3. 端午总结Vue3中computed和watch的使用

    1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.fals ...

  4. vue 3 学习笔记 (七)——vue3 中 computed 新用法

    vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...

  5. 在vue3中使用router-link-active遇到的坑

    在使用 router-link-active 设置链接激活时CSS类名时,发现在例如 /member/order 和 /member/order/:id 这两个都包含 /member/order的路由 ...

  6. Vue3中的响应式对象Reactive源码分析

    Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...

  7. Vue3中插槽(slot)用法汇总

    Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽 简单来说就是子组件中的提供给父组件使用 ...

  8. vue3中defineComponent 的作用

    vue3中,新增了 defineComponent ,它并没有实现任何的逻辑,只是把接收的 Object 直接返回,它的存在是完全让传入的整个对象获得对应的类型,它的存在就是完全为了服务 TypeSc ...

  9. Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务

    前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...

随机推荐

  1. js中return;、return true、return false;区别

    一.返回控制与函数结果 语法为:return 表达式 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制 无函数结果,语法为:return; 在大多数情况下,为事件处理函数返 ...

  2. 一起来刷《剑指Offer》-- 题目一:找出数组中重复的数字(Python多种方法实现)

    数组中重复的数字 最近在复习算法和数据结构(基于Python实现),然后看了Python的各种"序列"--比如列表List.元组Tuple和字符串String,后期会写一篇博客介绍 ...

  3. @NotNull 、@NotBlank、@NotEmpty区别

    @NotNull: 主要用在基本数据类型上(Integer.Double...) 不能为null,但可以为empty 举例: @NotNull(message = "标题不能为空" ...

  4. C#中的元组(Tuple)和结构体(struct)

    在正常的函数调用中,一个函数只能返回一个类型的值,但在某些特殊情况下,我们可能需要一个方法返回多个类型的值,除了通过ref,out或者泛型集合可以实现这种需求外,今天,讲一下元组和结构体在这一方面的应 ...

  5. (数据科学学习手札121)Python+Dash快速web应用开发——项目结构篇

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  6. QFNU-11.08training

    7-1  阅览室 题目: 天梯图书阅览室请你编写一个简单的图书借阅统计程序.当读者借书时,管理员输入书号并按下S键,程序开始计时:当读者还书时,管理员输入书号并按下E键,程序结束计时.书号为不超过10 ...

  7. @Aspect 注解使用详解

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点, ...

  8. [Django框架之路由层匹配、有名 无名分组、反向解析、路由分发、名称空间、伪静态、本地虚拟环境、django版本区别]

    [Django框架之路由层匹配.有名 无名分组.反向解析.路由分发.名称空间.伪静态.本地虚拟环境.django版本区别] 路由层 路由即请求地址与视图函数的映射关系,如果把网站比喻成一本书,那路由就 ...

  9. CentOS 8.2远程连接vncserver升级后1.10.1无法启动解决记录

    CentOS 8.2远程连接vncserver升级后1.10.1无法启动解决记录   问题起源:手贱yum upgrade,重启服务器后无法使用vnc viewer远程连接 查看状态 # system ...

  10. echo "This is line $LINENO"返回行号

    echo "This is line $LINENO"返回行号 LINENO 变量LINENO返回它在脚本里面的行号. #!/bin/bash echo "This is ...