Vue3中toRefs的使用
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的使用的更多相关文章
- vue3中使用axios如何去请求数据
在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...
- vue3中watch函数
watch 监听普通类型 let count = ref(1); const changeCount = () => { count.value+=1 }; watch(count, (newV ...
- 端午总结Vue3中computed和watch的使用
1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.fals ...
- vue 3 学习笔记 (七)——vue3 中 computed 新用法
vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...
- 在vue3中使用router-link-active遇到的坑
在使用 router-link-active 设置链接激活时CSS类名时,发现在例如 /member/order 和 /member/order/:id 这两个都包含 /member/order的路由 ...
- Vue3中的响应式对象Reactive源码分析
Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...
- Vue3中插槽(slot)用法汇总
Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽 简单来说就是子组件中的提供给父组件使用 ...
- vue3中defineComponent 的作用
vue3中,新增了 defineComponent ,它并没有实现任何的逻辑,只是把接收的 Object 直接返回,它的存在是完全让传入的整个对象获得对应的类型,它的存在就是完全为了服务 TypeSc ...
- Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务
前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...
随机推荐
- <JVM中篇:字节码与类的加载篇>03-类的加载过程(类的生命周期)详解
笔记来源:尚硅谷JVM全套教程,百万播放,全网巅峰(宋红康详解java虚拟机) 同步更新:https://gitee.com/vectorx/NOTE_JVM https://codechina.cs ...
- 21.Quick QML-FileDialog、FolderDialog对话框
1.FileDialog介绍 Qt Quick中的FileDialog文件对话框支持的平台有: 笔者使用的是Qt 5.8以上的版本,模块是import Qt.labs.platform 1.1. 它的 ...
- 4.启动虚拟机 设置CentOS7
启动虚拟机 CentOS设置 1.点击箭头方向即可启动我们的VMware 2.设置语言 在第一步设置完成后,我们一直等待,即可来到语言设置界面 此处我们设置[中文] 3.设置安装信息 将下面带有[感叹 ...
- JAVA基础——包机制
包机制 包的语法格式package pkg1[.pkg2[.pkg3...]] 一般利用 公司域名倒置 作为包名; 例如www.baidu.com,则建立报的名字com.baidu.www 一般不要让 ...
- 马哥Linux--elasticsearch
ELK stack: Lucene: 文档:document 包含了一个或多个域的容器 field:value 域: 有很多选项 索引选项,存储选项,域向量使用选项 索引选项用于通过倒排索引来控制文本 ...
- Python socket 编程实验
实验内容 1.编写一个基于UDP协议的客户机与服务器程序,实现相互通讯. 2.编写一个基于TCP协议的客户机与服务器程序,实现相互通讯. 3.捕获以上两种通讯的数据包,使用Wireshark进行分析, ...
- Mysql 数据库基本操作
1.数据库设置密码 [root@db02 scripts]# mysqladmin -uroot password 123 2.使用密码登录 #1.正确的方式(不规范) [root@db02 scri ...
- k8s集群部署(2)
一.利用ansible部署kubernetes准备阶段 1.集群介绍 基于二进制方式部署k8s集群和利用ansible-playbook实现自动化:二进制方式部署有助于理解系统各组件的交互原理和熟悉组 ...
- python基础之字符串类型
一.python字符串类型概述 定义:在单引号\双引号\三引号内,由一串字符组成 name='Test' name = 'test' print(type(name)) --------------- ...
- tkinter是内置的模块,不同的版本的导入形式不同,现总结如下
#coding=utf-8 import os, sys try: from tkinter import * except ImportError: #Python 2.x PythonVersio ...