vue3解构defineProps失去响应式解决办法

 

先看下面的代码

const props = defineProps({
  showName: {
    type: String,
    default: "123",
  },
});
const { showName } = props;

我们发现这个东西虽然可以展示到页面但是它失去了响应式。

那么正确的使用姿势应该如下

const props = defineProps({
  showName: {
    type: String,
    default: "123",
  },
});
// const { showName } = props;
const { showName } = toRefs(props);

 

toRef 和 toRefs 的作用、用法、区别

 

• toRef: 复制 reactive 里的单个属性并转成 ref
• toRefs: 复制 reactive 里的所有属性并转成 ref

 

let info = reactive({
      name: 'Tony',
      greet: 'Hello'
    })
	// 复制 info 里的 greet 属性
    let rGreet = toRef(info, 'greet')

 

let info = reactive({
      name: 'Tony',
      greet: 'Hello'
    })
	// 复制整个 info
    let rInfo = toRefs(info)

 

 

注意要点

• template 要想访问 toRefs 的值，需要带上 .value 如果不带上，就会出现双引号。
• template 要想访问 toRef 的值，不需要带上 .value

 

<template>
  <div>{{ p.showName }}</div>
  <div>{{ p.showName.value }}</div>
</template>
<script setup>
const props = defineProps({
  showName: {
    type: String,
    default: "123",
  },
});


const p = toRefs(props);
console.log(p.showName.value);


// const { showName } = toRefs(props);
// const { showName } = props;
</script>