一文带你了解Vue3中toRef和toRefs的用法 vue $refs的用法

   2023-03-08 学习力0
核心提示:toRef 顾名思义,不是ref 响应式数据,给它转成ref 响应式数据通俗易懂的理解: templateh3姓名:{{ person.name }}/h3h3年龄:{{ person.age }}/h3h3薪资:{{ person.job.j1.salary }}/h3button @click="person.name += '!'"修改姓名/buttonbutton @click="

toRef 顾名思义,不是ref 响应式数据,给它转成ref 响应式数据

通俗易懂的理解:

 <template>
  <h3>姓名:{{ person.name }}</h3>
  <h3>年龄:{{ person.age }}</h3>
  <h3>薪资:{{ person.job.j1.salary }}</h3>
  <button @click="person.name += '!'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>
 
<script>
import { reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    return {
      person,
    };
  },
};
</script>
 
<style>
</style>

首先实现功能没问题,接下来考虑到代码优化:

一文带你了解Vue3中toRef和toRefs的用法

那可能会想到 我在return的时候,麻烦一些,

 return {
      name: person.name,
      age: person.age,
      job: person.job.j1.salary,
    }; 

但是,这样操作你会发现页面不是响应式的,数据修改页面不发生变化,如下:

一文带你了解Vue3中toRef和toRefs的用法

接下来看 toRef的用法: 很明显实现了效果

 <template>
  <h3>姓名:{{ name }}</h3>
  <h3>年龄:{{ age }}</h3>
  <h3>薪资:{{ salary }}</h3>
  <button @click="name += '!'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="salary++">涨薪</button>
</template>
 
<script>
import { reactive, toRef } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    return {
      name: toRef(person, "name"),
      age: toRef(person, "age"),
      salary: toRef(person.job.j1, "salary"),
    };
  },
};
</script>
 
<style>
</style>

一文带你了解Vue3中toRef和toRefs的用法

介绍完toRef的用法之后,接下来来看一下toRefs的用法吧

一文带你了解Vue3中toRef和toRefs的用法

原文地址:https://blog.csdn.net/m0_59006402/article/details/128172438
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • vue3+TS 自定义指令:长按触发绑定的函数
    vue3+TS 自定义指令:长按触发绑定的函数而然间看到一个在vue2中写的长按触发事件的自定义指定,想着能不能把他copy到我的vue3项目中呢。编写自定义指令时遇到的几个难点1.自定义指令的类型在ts中写任何东西都要考虑到类型的问题,自定义指令的类型问题依然存
    03-08
  • Vue生命周期 vue生命周期几个阶段
    Vue生命周期 vue生命周期几个阶段
    官网解释一、Vue的生命周期Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom - 渲染、更新 - 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。Vue2生命周期:1.beforeCreate(创建前)数据观测和初始化事件还未开始,此时 dat
    03-08
  • vue 中安装并使用echart
    vue 中安装并使用echart
    本文为博主原创,转载请注明出处:1.安装echart 依赖:  安装命令: npm install echarts --save  在vscode 的终端窗口进行执行,如图所示:   执行完之后,查看 项目中的echart 版本依赖是否添加成功:  package-lock.json 中有具体的echart 依赖
    03-08
  • day04-Vue01
    day04-Vue01
    Vue011.Vue是什么?Vue(读音/vju:/,类似于view)是一个前端框架,依据构建用户界面Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或者项目整合支持和其他类库结合使用开发复杂的单页应用非常方便Vue是Vue.js的简称官网:Vue.js - 渐进式 JavaScr
    03-08
  • Vue + Element 自定义上传封面组件
    Vue + Element 自定义上传封面组件
    前一段时间做项目,频繁使用到上传图片组件,而且只上传一个封面,于是想着自定义一个图片封面上传组件。先来看一下效果:                      第一张图片是上传之前,第二张图片是上传成功后,第3张图片是鼠标放上去之后的效果! 首先整理需
    03-08
  • 基于ZR.VUE 前端的改造,页面刷新报错
     问题描述:前后端分离开发,分开部署. 页面刷新 直接报404 错误的解决办法提示:  先在 .env.development 中 配置 VUE_APP_BASE_API , 将 '/' 替换为 后端地址 'http://localhost:8888/'如果是对应的发布的正式环境,也要修改  .env.production 的VUE_APP_
    03-08
  • Vue3 企业级优雅实战 - 组件库框架 - 9 实现组
    上文搭建了组件库 cli 的基础架子,实现了创建组件时的用户交互,但遗留了 cli/src/command/create-component.ts 中的 createNewComponent 函数,该函数要实现的功能就是上文开篇提到的 —— 创建一个组件的完整步骤。本文咱们就依次实现那些步骤。(友情提示
    03-08
  • vue-3 this概念
    一、this概念官方是这样说的:在 setup()内部,this 不会是该活跃实例的引用因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同这在和其它选项式 API 一起使用 setup() 时可能会导致混淆啥意思呢
    03-08
  • vue3和百度地图关键字检索 定位 点击定位
    vue3和百度地图关键字检索 定位 点击定位
    效果图在index.html中引入百度地图开放平台  去申请你的ak 非常的简单可以自己百度 一下!-- 这个用官网给的有好多警告 更具百度的把 https://api.map.baidu.com/getscript?v=2.0ak=xxxxxxxxxxxxxxxxxxxxx 换为这个就没有那么多 报错了 --scripttype="text/j
    03-08
  • Vue集成lodop插件实现打印功能 vue打印console
    Vue集成lodop插件实现打印功能 vue打印console
    目录VUE简单使用lodop1.创建LodopFuncs.js文件2.在打印功能vue页面引入LodopFuncs3.执行打印方法4.打印接口函数官网样例说明5.完整页面示例VUE 集成LODOP插件打印Lodop、C-Lodop使用说明及样例http://www.lodop.net/LodopDemo.htmlVUE简单使用lodop1.创建Lodo
    03-08
点击排行