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>
相关推荐
李长渊哦4 小时前
深入理解 JavaScript 中的全局对象与 JSON 序列化
开发语言·javascript·json
Senar6 小时前
如何判断浏览器是否开启硬件加速
前端·javascript·数据可视化
HtwHUAT6 小时前
实验四 Java图形界面与事件处理
开发语言·前端·python
利刃之灵6 小时前
01-初识前端
前端
codingandsleeping6 小时前
一个简易版无缝轮播图的实现思路
前端·javascript·css
天天扭码6 小时前
一分钟解决 | 高频面试算法题——最大子数组之和
前端·算法·面试
全宝7 小时前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
拉不动的猪7 小时前
简单回顾下插槽透传
前端·javascript·面试
烛阴8 小时前
Fragment Shader--一行代码让屏幕瞬间变黄
前端·webgl
爱吃鱼的锅包肉8 小时前
Flutter路由模块化管理方案
前端·javascript·flutter