前一篇讲了 vue3的生命周期钩子的使用。
本节接着讲 vue3的数据通信。

provide/inject 依赖注入

App.vue

Info.vue 作为后代组件来消费根组件传递的数据

父子组件通信

创建一个List.vue

创建Info.vue, 父组件传递 tex 变量给子组件， 子组件通过触发getDataFromSon()向父组件传递数据

setup() 这种写法

setup() 和 区别

• setup()函数中定义的变量或者函数，需要 return 暴露出去，模板才能调用
• 而当使用 优势：
  
  toRef() 和 toRefs() 区别
  

const state = reactive({foo: 1,bar: 2
})
// 通过toRef()后 fooRef变量也是响应式的，改变foo的值，fooRef也改变
// 作用：将一个非响应式的变量转换为一个响应式变量
const fooRef = toRef(state, 'foo')// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

ref()和shallowRef() 区别

ref()我们知道可以创建一个响应式变量
shallowRef(): ref() 的浅层作用形式。

那么，shallowRef()就是可以创建一个浅层次的响应式变量，
应用场景：如果你的数据不赋值，不变更或者修改，只是做展示用，那么可以用 shallowRef(),可以节省性能消耗

reactive() 和 shallowReactive()

reactive(): 返回一个对象的响应式代理,
响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性

shallowReactive():reactive() 的浅层作用形式。

和 reactive() 不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。属性的值会被原样存储和暴露，这也意味着值为 ref 的属性不会被自动解包了
若要避免深层响应式转换，只想保留对这个对象顶层次访问的响应性，请使用 shallowReactive() 作替代。

const state = shallowReactive({foo: 1,nested: {bar: 2}
})// 更改状态自身的属性是响应式的
state.foo++// ...但下层嵌套对象不会被转为响应式
isReactive(state.nested) // false// 不是响应式的
state.nested.bar++