#响应性

vicky.yu

#添加响应性
为了增加提供值和注入值之间的响应性，我们可以在提供值时使用 ref 或 reactive。

使用 MyMap 组件，我们的代码可以更新如下：

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.vue
export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })
    provide('location', location)
    provide('geolocation', geolocation)
  }
}
</script>
现在，如果这两个 property 中有任何更改，MyMarker 组件也将自动更新！

#修改响应式 property
当使用响应式提供/注入值时，建议尽可能，在*提供者*内保持响应式 property 的任何更改。

例如，在需要更改用户位置的情况下，我们最好在 MyMap 组件中执行此操作。

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.vue
export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })
    provide('location', location)
    provide('geolocation', geolocation)
    return {
      location
    }
  },
  methods: {
    updateLocation() {
      this.location = 'South Pole'
    }
  }
}
</script>