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

Question

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

Answer 1

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!-- @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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

<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条评论