inject 响应式_Vue.js中provide/inject实现响应式数据更新

首先了解Vue.js中provide/inject的基本用法：

官方的说明大家可以打开上面的链接去看，说通俗点，就是可以用来父辈们给祖孙传值，请看清楚，这里说的是可以隔代传值，传统的props只能父传子，不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，这就是它最大的特性。

基本用法：

provide 选项应该是：一个对象或返回一个对象的函数

inject 选项应该是：一个字符串数组，或 一个对象，对象的 [key] 是本地的绑定名

代码执行顺序：

data

provide

created//在这个阶段$el还未生成，在这先处理privide的逻辑，子孙组件才可以取到inject值

mounted

首先假设我们在祖辈传入进来是个动态的数据，官方不是说如果你传入了一个可监听的对象，那么其对象还是可响应的么？

parent父页面：

export default {

data(){

return { fonnB: 'old word '}

},

provide() {

return { foo: this.fonnB }

},

created() {

setTimeout(()=>{

this.fonnB = 'new words'; // 这里仅仅foonB变化了，foo没有变化

this._provided.foo="new words"; // 这里foo变化了，但子组件获得的foo 依旧是old words

console.log( this._provided);

},1000)

},

}

child子页面：

export default {

inject:['foo'],

data(){

return { chilrfoo: this.foo }

},

created() {

setTimeout(()=>{

// 子组件获得的foo 依旧是old words

console.log( this.foo)

},2000)

}

}

结果:

通过上面方式，经过验证，子组件页面都没办法实现响应更新this.foo的值。可能我们对官方理解还是有误，下面通过网上资料和自己构思实现了响应式数据更新

示例(结果仍不可行)

很明显上面再父组件定时器内我们是改变了数据源，这个时候我们就在想，我们改变的数据到底有没有传入到子孙组件中，那么要验证这个问题，我们不妨可以在子孙组件中手动写set 函数，computed 本身就只相当于一个get函数，当然，你也可以试试watch

parent父页面：

export default {

data(){

return {

fonnB: 'old word'

}

},

provide() {

return { foo: this.fonnB }

},

created() {

setTimeout(()=>{

this.fonnB = "new words";

// 这里foo变化了，但子组件获得的foo 依旧是old words

},1000)

},

}

child子页面：

export default {

inject:['foo'],

data(){

return {

childfooOld: this.foo

}

},

computed:{

chilrdfoo() {

return this.foo

}

},

created () {

console.log(this.foo)

// -> 'old word'

setTimeout(() => {

console.log(this.chilrdfoo); // 这里计算属性依旧是old words

}, 2000);

}

}

通过computed，我们都知道data中有get/set，数据也是响应式的，但为什么没更新，有点疑惑，如果有大佬知道能解释清楚的可以探讨。

但是，但是，但是！实际需求肯定没有这么简单，往往我们需要的是共享父组件里面的动态数据，这些数据可能来自于接口 或者 store。 就是说父组件里面的数据发生变化之后，需要同步到子孙组件里面。这时候该怎么做呢？

我想的是将一个函数赋值给provide的一个值，这个函数返回父组件的动态数据，然后在子孙组件里面调用这个函数。

实际上这个函数存储了父组件实例的引用，所以每次子组件都能获取到最新的数据。代码长下面的样子：

Parent组件：

Parent组件

改变name

Parent组件中 name的值: {{name}}

import Child from './Child'

export default {

name: 'Parent',

data () {

return {

name: 'Kevin'

}

},

methods: {

changeName (val) {

this.name = 'New Kevin'

}

},

provide () {

return {

nameFromParent: this.name,

getReaciveNameFromParent: () => this.name

}

},

// provide: {

// nameFromParent: this.name,

// getReaciveNameFromParent: () => this.name

// },

components: {

Child

}

}

Child组件

Child组件

import GrandSon from './GrandSon'

export default {

components: {

GrandSon

}

}

GrandSon组件：

Grandson组件

{{nameFromParent}}

{{reactiveNameFromParent}}

export default {

inject: ['nameFromParent', 'getReaciveNameFromParent'],

computed: {

reactiveNameFromParent () {

return this.getReaciveNameFromParent()

}

},

watch: {

'reactiveNameFromParent': function (val) {

console.log('来自Parent组件的name值发生了变化', val)

}

},

mounted () {

console.log(this.nameFromParent, 'nameFromParent')

}

}

结果:

来自于reactiveNameFromParent ，随着祖先组件变化而变化了