vue3+js+vite学习之响应式问题总结_v3+vite响应式布局

一、组件之间传参，props数据有时丢失响应性，页面不刷新

因为直接对props的数据进行解构，例如const {a} = props，会使数据丢失响应性，需要使用toRefs和toRef保持响应性。另外直接使用props.xxx 的方式，数据不会丢失响应性。

因此，props保持响应性的方法总结如下：

1、通过 props.xxx 的形式来使用其中的 props。(在script中使用的时候，后面不需要再加.value获取值）

2、通过解构 props对象的方式调用时，需要使用toRefs和toRef来保持数据具有响应性。(在script中使用的时候，需要加.value获取值，因为现在是ref类型）

示例如下：

• 父组件

<template>
  <child-component :text="text"></child-component>
</template>
<script setup>
import { ref } from 'vue'
const text = ref('初始值')
setTimeout(() => {
  text.value = '变化值'
}, 2000)
</script>

• 子组件（方法一 props.xxx）

<template>
  <div>{{ props.text }}</div>
</template>
<script setup>
const props = defineProps({
  text: {
    type: String,
    default: ''
  }
})
// 获取值
console.log('value:',props.text)
</script>

• 子组件（方法二 toRefs和toRef 解构props）

<template>
  <div>{{ text }}</div>
</template>
<script setup>
import { toRefs, toRef } from 'vue'
const props = defineProps({
  text: {
    type: String,
    default: ''
  }
})
// 将 `props` 转为一个其中全是 ref 的对象，然后解构
const { text } = toRefs(props)
// 获取值
console.log('value:',text.value)
// 或者，将 `props` 的单个属性转为一个 ref
const { text1 } = toRef(props, 'text')
// 获取值
console.log('value:',text1.value)
</script>

二、使用pinia定义store，页面获取store的数据，有时丢失响应性

store 是一个用 reactive 包裹的对象，这意味着不需要在getter 之后写.value，但是，就像setup中的props一样，我们不能对其进行解构，需要结合storeToRefs使用。另外直接使用store.xxx的形式，或者使用computed的方式也不会丢失响应性。

因此，store数据保持响应性的方法总结如下：

1、通过 store.xxx 的形式直接使用。(在script中使用的时候，后面不需要再加.value获取值）

2、通过computed计算属性的方式获取store的数据，在页面中使用。(在script中使用的时候，需要加.value获取值，因为computed需要加.value）

3、从 store 中提取属性时，保持其响应式，您需要使用storeToRefs。它将为任何响应式属性创建 refs。(在script中使用的时候，需要加.value获取值，因为现在是ref类型）

 示例如下：

• store文件

import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useSystemInfoStore = defineStore('systemInfo', () => {
  const title = ref('hello world')
  return {
    title
  }
})

• 组件（方法一 直接使用）

<template>
  <div>
    {{ systemInfoStore.title }}
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useSystemInfoStore } from '@/store/systemInfoStore'
const systemInfoStore = useSystemInfoStore()
// 获取值
console.log('value:',systemInfoStore.title)
</script>

• 组件（方法二 computed）

<template>
  <div>
    {{ title }}
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useSystemInfoStore } from '@/store/systemInfoStore'
const systemInfoStore = useSystemInfoStore()
const title = computed(() => systemInfoStore.title);
// 获取值 computed必须加.value
console.log('value:',title.value)
</script>

• 组件（方法三 storeToRefs）

<template>
  <div>
    {{ title }}
  </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useSystemInfoStore } from '@/store/systemInfoStore'
const systemInfoStore = useSystemInfoStore()
// 使用storeToRefs解构
const { title } = storeToRefs(systemInfoStore)
// 获取值
console.log('value:',title.value)
</script>