07 | 巧妙的响应式：深入理解Vue 3的响应式机制

1. 为什么需要响应式？ 随着页面应用的不断复杂，需要关注和管理的状态越来越多，之前靠被动的，分散的管 理状态不现实也易出错。为了满足这个需求，出现了许多方案，其中 Vue 提出的或主打 的解决方案的就是响应式。 2. 怎么实现响应式？ 响应式主要解决的问题是怎么让在“语言层面上分散的独立数据”在“业务层面”上产生“联 系或互为因果”的关系。这咋么办呢？怎么产生“联系”呢？简单，“你发生变化的时候告 诉我一声，我应声而动”，所谓响应式我个人理解就是“你响我应”。 但是这种需求在语言上不是“普遍需求”，属于“特殊需求”，怎么解决？这里就引入了“代 理模式”这种设计模式。在语言层面我给你一种模式可以满足你的需求，ES5 的时代，是 defineProperty 等，ES6 就是 Proxy。 至于 ES6 的 Proxy 在性能或是各方面要优于 defineProperty 还是因为 Proxy 在更底 层优化或重新实现，使用的表现“一样”，但“地基”不一样，性能各方面自然是不一样。 正因为是“地基”的不同，Proxy 就还存在兼容性的问题, 加上业务场景的不同， defineProperty 还是有应用的场景，至于文中说的 Vue 3 的 ref 是用 “getter setter” 实现的，我的认识是，一个是“初始化”时的行为，一个是“改变行为”。 3. useXXX 为什么会这么灵活？ 像之前的 Composition API 我理解的是 Vue 的组织单位由 “组件” 变成 “数据” 了， 现在组件在引入 useXXX，关注点在 XXX，至于 XXX 跟什么有联系，那是你的事情，在 你自己的 useXXX 里去实现。 本节提到的 React Hooks 也有异曲同工的意思，Hooks 直接翻译成什么？“钩子”，用来 做什么？“钩东西”，钩什么？那先说下这个东西出来之前有什么。 React Hooks 出来之前 React 主要构建 App 还是用 Class Component，当然也有 functional component，这俩区别就在于 class 有状态，functional 比较“纯粹”没有 状态。这样复用成问题，得用什么高阶组件之类的方式。然后，在某一时刻，同样的问 题出现了，React 复用组件的也是以带状态的 Class 组件为主，“复杂”了，不纯粹。 应用越大，这种模式开发或维护越复杂。然后 Hooks 出现了，现在 React 都用 “functional” 组件，但是有“状态”的，状态哪里来的 “Hook” 过来的，钩过来的。 组件“不负责”维护状态，useXXX 去管理了。 综上，灵活了，也好维护了

useStorage函数中，ref初始赋值时应该是使用参数value代替'[]'不？ ``` function useStorage(name, value=[]){ let data = ref(JSON.parse(localStorage.getItem(name)) || value) ...code } ```

请问是watch watcheffect 那个性能高呀？有人说过watch性能能好一点

大圣老师，请教一下，3.2版本之后，是不是定义响应式数据都可以用ref一把梭？我看有的文章是这样说的，ref在3.2之后性能进行了大幅度提升，所以建议使用ref，不管简单数据还是复杂数据都可以用ref，没必要用reactive

link[rel*="icon"] 老师请问这个是过滤什么呢？

浏览器页面全屏、滚动等的封装，之前有需求就是全屏要动态调整页面的布局，在没有封装的情况下，就要每个页面需要时都写监听，而用useXXX感觉会优雅很多啊，点赞，学到了，赶紧实践实践。

想问一下，问啥vscode里，ctrl+左键不能跳转到函数定义，我创建的这个vue3项目里都跳转不了，拿以前写的vue2项目试了一下，可以跳转，好奇怪

第一次加到存储里todos：[{"title":"2222","done":false}]。 刷新页面后存储里的tods变成了"[{\"title\":\"2222\",\"done\":false}]"

你好 我想问下 let proxy = new Proxy(obj,{ get : function (target,prop) { return target[prop] }, set : function (target,prop,value) { target[prop] = value; if(prop==='count'){ double = getDouble(value) } }, deleteProperty(target,prop){ delete target[prop] if(prop==='count'){ double = NaN } } }) console.log(obj.count,double) proxy.count = 2 console.log(obj.count,double) delete proxy.count // 删除属性后，我们打印log时，输出的结果就会是 undefined NaN console.log(obj.count,double) 执行这个时候 控制台报错：TypeError: 'set' on proxy: trap returned falsish for property 'count'。 是什么原因 希望能解答

希望更加深入讲一下，vue3的响应式原理，是如何进行依赖收集的，并触发响应到数据的，串一下流程，还有为什么用watchEffect而不用watch，都适用于哪些场景，各有什么优势