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>
相关推荐
顾辰逸you2 分钟前
uniapp--咸虾米壁纸项目(一)
前端·微信小程序
方方洛16 分钟前
电子书阅读器:epub电子书文件的解析
前端·产品·电子书
idaibin17 分钟前
Rustzen Admin 前端简单权限系统设计与实现
前端·react.js
GISer_Jinger23 分钟前
Trae Solo模式生成一个旅行足迹App
前端·javascript
zhangbao90s24 分钟前
Intl API:浏览器原生国际化API入门指南
前端·javascript·html
艾小码26 分钟前
构建现代前端工程:Webpack/Vite/Rollup配置解析与最佳实践
前端·webpack·node.js
跟橙姐学代码31 分钟前
Python 集合:人生中最简单的真理,只有一次
前端·python·ipython
复苏季风32 分钟前
站在2025 年 来看,现在应该怎么入门CSS
前端·css
pepedd86434 分钟前
深度解剖 Vue3 架构:编译时 + 运行时的协作
前端·vue.js·trae
一枚前端小能手36 分钟前
🧪 改个代码就出Bug的恐惧,前端测试来帮忙
前端·测试