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>
相关推荐
icebreaker20 小时前
重新思考 weapp-tailwindcss 的未来
前端·javascript·css
焦糖小布丁20 小时前
为什么IP地址SSL证书比域名证书更贵?
前端
光影少年20 小时前
WEBNN是什么,对前端工程带来哪些优势
前端·web3·web
djk888820 小时前
极简后台框架
前端·css·css3
LilySesy20 小时前
ABAP+如果在join的时候需要表1的字段某几位等于表2的字段的某几位,需要怎么做?
服务器·前端·数据库·sap·abap·alv
涤生啊21 小时前
一键搭建 Coze 智能体对话页面:支持流式输出 + 图片直显,开发效率拉满!
javascript·html5
吃饺子不吃馅21 小时前
⚡️ Zustand 撤销重做利器:Zundo 实现原理深度解析
前端·javascript·github
幼儿园技术家21 小时前
网站在苹果 Safari 进行适配遇到的问题
前端
IT_陈寒21 小时前
7个鲜为人知的JavaScript性能优化技巧,让你的网页加载速度提升50%
前端·人工智能·后端
不坑老师21 小时前
不坑盒子的插入网页功能是完全免费的!
前端·html