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>
相关推荐
Mintopia10 分钟前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九27 分钟前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
小西↬28 分钟前
vite+vue3+websocket处理音频流发送到后端
javascript·websocket·音视频
Mintopia1 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb1891 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
烛阴2 小时前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript
Entropy-Lee2 小时前
JavaScript 语句和函数
开发语言·前端·javascript
Wcowin3 小时前
MkDocs文档日期插件【推荐】
前端·mkdocs
xw54 小时前
免费的个人网站托管-Cloudflare
服务器·前端
网安Ruler4 小时前
Web开发-PHP应用&Cookie脆弱&Session固定&Token唯一&身份验证&数据库通讯
前端·数据库·网络安全·php·渗透·红队