摘要:本文将介绍 Vue 2 和 Vue 3 中 toRefs 函数的不同用法和行为,并解释其在各个版本中的作用。

正文:

Vue 是一款流行的 JavaScript 框架,用于构建用户界面。在 Vue 2 和 Vue 3 中,都存在一个名为 toRefs 的函数,但其行为在这两个版本中有所不同。

Vue 2 中的 toRefs

在 Vue 2 中,使用 Composition API 需要安装 @vue/composition-api 库,并显式导入 toRefs 函数。toRefs 函数接受一个响应式对象作为参数,并将该对象的属性转换为非响应式的引用(ref)。

import { reactive, toRefs } from "@vue/composition-api";

export default {
setup() {
const state = reactive({ name: 'John', age: 30 });
const refs = toRefs(state); console.log(refs.name.value); // 访问 name 属性的值 return {
refs,
};
},
};

在 Vue 2 中,通过使用 toRefs,我们可以在模板和代码中方便地使用响应式对象的属性。

Vue 3 中的 toRefs

在 Vue 3 中,toRefs 函数与 Vue 2 中的版本略有不同。在 Vue 3 中,不再需要安装额外的库,toRefs 函数已经作为内置功能提供。此外,Vue 3 的 Composition API 是默认支持的。

import { reactive, toRefs } from 'vue';

export default {
setup() {
const state = reactive({ name: 'John', age: 30 });
const refs = toRefs(state); console.log(refs.name.value); // 访问 name 属性的值 return {
refs,
};
},
};

在 Vue 3 中,我们可以直接使用 toRefs 函数将响应式对象的属性转换为单独的 ref 对象。这样,我们可以在代码中或模板中以 .value 的形式访问属性的值。

总结

在 Vue 2 中,toRefs 需要使用 @vue/composition-api 库,而在 Vue 3 中,toRefs 已经成为内置的功能。

Vue 2 和 Vue 3 中的 toRefs 函数都用于将响应式对象的属性转换为引用,以便在组件内部以及模板中使用。然而,在 Vue 3 中,toRefs 可以直接使用,而不需要额外的安装和导入过程。

这就是 Vue 2 和 Vue 3 中 toRefs 的区别。

Vue 2 和 Vue 3 中 toRefs的区别的更多相关文章

  1. Vue在ASP.NET MVC中的进行前后端的交互

    Vue在ASP.NET MVC中的进行前后端的交互 Preface: 由于最近在研究前端相关的技术,作为前端非常优秀的框架Vue,个人在学习的过程中遇到一些问题,网上相关资料有限,所以在这这里总结一下 ...

  2. ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别

    ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...

  3. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  4. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  5. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  6. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  7. vue cli3以上的项目中如何使用axois请求本地json文件

    首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...

  8. Vue. 之 Element获取table中选中的行

    Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...

  9. 使用Vue.prototype在vue中注册和使用全局变量

    在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创 ...

  10. 仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大

    仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大 1.介绍 先看图 ​ 今天在项目中遇到了一个问题,例如我现在需要传一些数据到后端,数组例如是 let arr = [ {" ...

随机推荐

  1. 前端三件套系例之BootStrap——BootStrap基础、 BootStrap布局

    文章目录 1 BootStrap基础 1 什么是BootStrap 2 BootStrap的版本 3 BootStrap 下载 4 CDN服务 5 目录结构 6 基本模板 7 浏览器支持 8 浏览器兼 ...

  2. 【Mac2021版Intel芯片下载】 - Intel芯片推荐安装

    [Mac2021版Intel芯片下载] - Intel芯片推荐安装 往下拉有安装图文教程一.下载提示1请点击图标进行下载 ●每个软件下方均标注了该软件的用途,请注意查看: ●如果点击无反应,请换一个浏 ...

  3. vue项目使用lodash节流防抖函数问题与解决

    背景 在lodash函数工具库中,防抖_.debounce和节流_.throttle函数在一些频繁触发的事件中比较常用. 防抖函数_.debounce(func, [wait=0], [options ...

  4. 可视化-vscode安装pandas

    pandas 是基于NumPy 的一种工具,该工具是为解决数据分析任务而创建的.Pandas 纳入了大量库和一些标准的数据模型,提供了高效地操作大型数据集所需的工具.pandas提供了大量能使我们快速 ...

  5. Flex 布局项目实战,好像没那么难!

    在上篇文章别再用 float 布局了,flex 才是未来!中,我们聊到 Flex 布局才是目前主流的布局方式.在文章最后,我们还贴了一个案例,并且还浅浅地讲解了一下. 有些小伙伴说,这讲解得太粗了,要 ...

  6. 用阿里云镜像Centos7通过rpm和源码编译方式安装MySQL5版本

    这里只说明安装和注意事项,更具体的配置如端口号.cnf文件配置等就不写了. 阿里云开源镜像站资源目录 (aliyun.com) 我用的是基础版本. 基础版本镜像是默认不联网的,可以用下面的命令ping ...

  7. kubernetes组件介绍-service概念

    kubernetes组件介绍 MESOS APACHE 分布式资源管理框架 2019-5 Twitter > Kuberneets Dcocker Swarm 2019-07 阿里云宣布 Doc ...

  8. Unity EditorWindow GUI裁剪

    Unity2017,想在编辑器自己实现一个类似TreeView的东西 public void OnGUI(Rect rect) { // ... for (int i = 0; i < 100; ...

  9. Chromium Canvas工作流

    blink 中实现了2种 canvas,分别是 blink::HTMLCanvasElement 和 blink::OffscreenCanvas ,前者对应 html/dom 中的 canvas,后 ...

  10. JAVA架构师

    https://github.com/zq99299/note-architect https://zq99299.github.io/note-architect/hc/ https://zq992 ...