全局属性管理

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象

xxxxxxxxxx
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 全局属性
app.config.globalProperties.$num = 10;

app.mount('#app')

xxxxxxxxxx
<template>
    <p>{{ proxy.$num }}</p>
</template>
<script setup>
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()
</script>

Vuex 和单纯的全局对象有以下不同:

全局对象可以更方便的在任意组件读取数据，但是无法达到响应式

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新

xxxxxxxxxx
<template>
    <p>{{ proxy.$num }}</p>
    <button @click="updateHandler">修改数据</button>
</template>
<script setup>
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()
function updateHandler(){
    console.log(proxy.$num);
    proxy.$num++
}
</script>

实时效果反馈

1. 在Vue中，如何定义一个全局对象：

A app.config.globalProperties= 10;

B app.globalProperties.$num = 10;

C app.config.$num = 10;

D app.config.globalProperties.$num = 10;

答案

1=>D