【Vue3重点概念总结和实践三】（shallowRef / shallowReactive / triggerRef / inject / onUnmounted）

 

目录

1、shallowRef 和 shallowReactive 

2、Dependency Injection 依赖注入

3、生命钩子函数

4、Vue3 + Vue-cli (1) 基础篇

5、Vue3+ Vue-cli (2) 组件篇

---

1、shallowRef 和 shallowReactive 

原题： 

vuejs-challenges/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

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

概念：

一个浅层响应式对象里只有根级别的属性是响应式的。只处理对象最外层属性的响应式（浅响应式）。

应用场景：

如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2
  }
})

// 更改状态自身的属性是响应式的
state.foo++

// ...但下层嵌套对象不会被转为响应式
isReactive(state.nested) // false

// 不是响应式的
state.nested.bar++

② shallowRef：ref()的浅层作用形式。

概念：

浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。只处理基本数据类型的响应式, 不进行对象的响应式处理。

应用场景：

【shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成】

如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef

const state = shallowRef({ count: 1 })

// 不会触发更改
state.value.count = 2

// 会触发更改
state.value = { count: 2 }

上面题目的答案：

 另外一种实现方式：

 triggerRef() 

强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。

/**修改以下代码使watch回调被触发*/
state.value.count = 2 // watch回调不被触发
triggerRef(state)

// state.value = {
//   count: 222
// }

文档：

响应式 API：进阶 | Vue.js

2、Dependency Injection 依赖注入

原题： 

vuejs-challenges/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

 inject() ： 注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。

// Child.vue

文档：

组合式 API：依赖注入 | Vue.js

依赖注入 | Vue.js

3、生命钩子函数

原题： 

vuejs-challenges/questions/10-lifecycle/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

onUnmounted()​ ：注册一个回调函数，在组件实例被卸载之后调用。

场景：

可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。这个钩子在服务器端渲染期间不会被调用。

文档：

组合式 API：生命周期钩子 | Vue.js

4、Vue3 + Vue-cli (1) 基础篇

Vue3 + Vue-cli (1) 基础篇_vue3 vue-cli_小草莓蹦蹦跳的博客-CSDN博客

5、Vue3+ Vue-cli (2) 组件篇

Vue3+ Vue-cli (2) 组件篇_vue3一个根组件写法_小草莓蹦蹦跳的博客-CSDN博客