今天用 provide 后，inject 獲取數據時不是實時更新的，獲取的不是更新后的值

祖父組件

<div style="text-align: left !important;"><button @click="change">更改</button>
</div>data() {return {name: 'init'}},provide() {return {name: this.name}},methods: {change() {this.name = 'change'}}

子孫組件

<template><div class="demo-select">name: {{ name }}</div>
</template>export default {inject: ['name']
};

點擊更改按鈕 name 值不變

原因：傳的初始值是空，不是引用類型，所以不會變成響應式，可以傳 函數或是引用類型

改法一：傳函數類型

?祖父組件

<div style="text-align: left !important;"><button @click="change">更改</button>
</div>data() {return {name: 'init'}},provide() {return {name: () => this.name}},methods: {change() {this.name = 'change'}}

子孫組件

<template><div class="demo-select">name: {{ name() }}</div>
</template>export default {inject: ['name']
};

name: () => this.name 變成函數式，每次取值都是調用函數取最新值

?改法二：傳引用類型

?祖父組件

<div style="text-align: left !important;"><button @click="change">更改</button>
</div>data() {return {pro: { name: 'init' }}},provide() {return {pro: this.pro}},methods: {change() {this.pro.name = 'change'}}

子孫組件

<template><div class="demo-select">name: {{ pro && pro.name }}</div>
</template>export default {inject: ['pro']
};

引用類型會變為響應式。