vue2 provide 后 inject 数据不是响应式的，不实时更新

今天用 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']
};

引用类型会变为响应式。