526互联

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

发布时间 2023-10-20 17:35:48作者: 龙果果

 

先看下面的代码

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>