vue3: toRef, reactive, toRefs, toRaw

vue3: toRef, reactive, toRefs, toRaw

扫码或者点击文字后台提问

javascript 复制代码
<template>
  <div>{{ man }}</div>
  <hr>
  <!-- <div>{{ name }}--{{ age }}--{{ like }}</div> -->
  <div>
    <button @click="change">修改</button>
  </div>
</template>
<script setup lang='ts'>
import { toRef, reactive, toRefs, toRaw } from 'vue';
/**
 * toref: 只能修改响应式对象的值,非常响应式视图毫无变化。
 * torefs: 将解构后的对象,声明为响应式的ref。
 * toRaw:将响应式对象 为一个普通的对象
 */


const man=reactive({name:"小田",age:23,like:"JK"})
// const like=toRef(man,"name");

// const {name,age,like} = toRefs(man)
const change = ()=> {
  // like.value="洛丽塔"
  // console.log(man);

  // name.value="小田田"
  // console.log(name,age,like);

  console.log(man,toRaw(man));

  
}
</script>
<style scoped>

</style>
相关推荐
天天进步20158 分钟前
Webpack到Vite:构建工具迁移实战经验总结
前端·webpack·node.js
0***149 分钟前
免费的WebAssembly模块打包,Webpack配置
前端·webpack·wasm
小胖学前端9 分钟前
解决 uniapp H5 与原生应用通信的坑:一个经过实战验证的解决方案
前端·uni-app
LaoZhangAI11 分钟前
Gemini 2.5 Flash Image API尺寸设置完整指南:10种宽高比详解
前端·后端
kangyouwei13 分钟前
鸿蒙开发:19-本地开发配置bash环境执行hvigorw命令
前端·harmonyos
Achieve前端实验室16 分钟前
JavaScript 原型/原型链
前端·javascript
一碗下酒菜18 分钟前
React 闭包陷阱详解
前端
littleplayer18 分钟前
ArkTs单元测试 UnitTest 指南
前端
LXA080920 分钟前
vue3开发使用框架推荐
前端·javascript·vue.js
拿不拿铁1939 分钟前
Vite & Webpack & Rollup 入口与产出配置与示例
前端