Vue provide / inject可监听的对象

提示provideinject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

可监听的响应对象: Array, Object

父级组件

provide() {
  const { obj, arr, fun } = this
  return {
    obj, arr, fun,
    newfun: param => 'newfun' + obj.foo + param // fun 的另一种方式。其中带有 arr 或 obj 的值,可同步更新
  }
},
data() {
  obj: {
    foo: 'foo',
    bar : 'bar'
  },
  arr: ['foo', 'bar'],
  fun: param => 'fun' + param
}

子孙组件

// 可响应对象
onject: ['obj', 'arr'],
created() {
  // 响应更新
  this.obj.foo = 'new foo' // 输出: new foo
  this.arr[1] = 'new bar' // 输出: new bar
}
// 通过函数调用方式使用
onject: ['fun'],
created() {
  // 响应更新
  console.log(this.fun()) // 输出: fun
}

fun模式可通过初始赋值修改影响当前值,或者通过父级组件修改影响所有值(子级修改当前域,父级修改所有域)

arr``obj修改影响所有域(不管子级修改还是父级修改都一样)

20201120

可响应对象不可一次性修改全部