请问老师为什么不是响应式

Question

老师我想请问下关于provide提供一个方法这个方法返回一个对象，然后使用计算属性监听调用这个方法这种方式和我直接provide一个对象然后使用computed有什么原理上的不同。
老师我明白第二种方式不会是响应式的，我自己实践也发现了。可是还是想请问老师为什么，我明明使用computed监听了这个provide提供的data。它和老师你调用方法return的本质也是这个对象，为什么这种方式就不是响应式

Answer 1

提问者 hy_wang 2020-09-09 11:22:00

<!-- @date: 2020-08-12 10:57:26 -->

<template>
  <div class="testView">{{test}}</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  inject: ["getTest"],
  computed: {
    test() {
      return this.getTest();
    },
  },
};
</script>

<template>
  <div>
    <!-- <router-view /> -->
    <test-view />
  </div>
</template>



<script>
import testView from "./testView";
export default {
  components: {
    testView,
  },
  provide() {
    return {
      getTest: this.getTest
    }
  },
  methods: {
    getTest() {
      return this.test;
    },
  },
  data() {
    return {
      test: 1,
      form: {
        filds: [
          { id: 3, name: "wanghaoyu", age: 23 },
          { id: 4, name: "wanghaoyu1", age: 24 },
        ],
      },
    };
  },
  mounted() {
    setInterval(() => {
      this.test++;
    }, 1000);
  },
};
</script>

• 希卡利 #1

  和你说话有点累，为什么能响应，我觉得是因为计算属性会更新，而不是因为 provide  传递的是方法 了解吗？ 计算属性会不断的更新 provide 的方法，方法可以获取最新的值

• 提问者 hy_wang #2

  你去试试子组件去掉computed直接使用inject的方法在模板上看看能不能更新

• 提问者 hy_wang 回复 希卡利 #3

  把computed去掉，子组件模板直接调用父方法。同样也是响应式，要不你先试试

点开查看后面2条评论

Answer 2

希卡利 2020-09-09 06:26:55

为什么会提供方法以供 provide 使用视频里面已经说过了，为了防止 组件实例化的时候 provide 默认实例化 null 数据

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

所以不是 computed 监听出了问题，而是 provide 本身和 inject 就不是可响应的数据 除非使用引用类型的数据，你可以多翻翻官方文档

• 提问者 hy_wang #1

  我的意思是说为什么使用method返回对象，和我直接computed对象

• 希卡利 回复 提问者 hy_wang #2

  不是说了，组件初始化的时候 provide 比数据请求快，所以会有 null 的情况，用 method 方法的时候，执行的时候才会去动态获取 数据 就不会出现 null 的情况了

• 希卡利 回复 提问者 hy_wang #3

  method 和 computed 区别是一个是方法需要手动执行，一个是属性自动执行

点开查看后面10条评论