06 | 新的代码组织方式：Composition API + <script setup> 到底好在哪里？

大圣，能不能搞一个 git 仓库来放每一讲的课程代码内容呢

每节课都有很多收获！ ✿ Options API vs Composition API 字面上, 选项 API 与 组合 API，细品, 这反映了设计面向的改变： 1. 选项，谁的选项，关键在“谁”。谁？组件。也是 Vue2.x 的设计基础。组件有什么， 有状态，有改变状态的方法，有生命周期，还有组件和组件之间的关系。这种情况 下，“数据”要接受一定的“规矩”，“什么时候能做什么事”，“什么时候有什么表现”； 这个状态下，开发模式像是“被动接受”。 2. 组合，什么组合，关键在“什么”。什么？数据。数据的组合。Vue3.x 设计重点变了，数 据变绝对的C了，现在去组件里串门，不用“守规矩”了，只需要说“我在 onMounted 的时 候要这样这样，你看着办”，真只能的以“数据”为中心，没人能管得了了，想去哪就去哪， 自然就灵活了 至于这些是怎么做到由“被动接受”到“主动告知”的，实现这部分内容，我很期待。 ✿ 模板语法更好用 <script setup> 像是“语法糖”，很甜；<style>里能用 v-bind，以后开发可以 少用“黑科技”了，双手点赞。 ✿ 至于思考题 Vue 本来就属于 DSL，语法方面各有偏好，见仁见智；响应式和生命周期需要 import，个 人认为就代表了从之前的“被动主动”转向“主动告知”，这样设计更加灵活。从此一条主线在 ”数据"，以后查 bug 顺着这条 "线" 应该更加容易了。

对于value，官方是这样解释的： 将值封装在一个对象中，看似没有必要，但为了保持 JavaScript 中不同数据类型的行为统一，这是必须的。这是因为在 JavaScript 中，Number 或 String 等基本类型是通过值而非引用传递的：在任何值周围都有一个封装对象，这样我们就可以在整个应用中安全地传递它，而不必担心在某个地方失去它的响应性

建议增加代码库，实时拉取更新，现在的代码片段看着比较麻烦

关于导入问题，antfu大神有一个插件unplugin-auto-import，可以自动注入依赖项，不用import https://github.com/antfu/unplugin-auto-import .value问题貌似最新的ref语法糖可以算是一个解决方案，但是目前褒贬不一，我不推荐现在就用

谢谢大圣老师的讲解。其中清单应用中，独立出来的useTodos函数，放在了哪里进行维护？并且，在使用这个函数时：let { title, ……} = useTodos() ，是不是还要对它进行一个引用？谢谢。

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

1，Composition API +setup的写法，看起来是把vue2中属于单个组件的js代码和组件解耦了，这样可以高效复用到其他组件中，但随着业务代码的增对，这样抽离出来的js也会越来越多，到时的维护管理难度又会加大，虽然这样做杜绝了在template,script间的反复横跳，但是无法避免地需要在各个js文件中跳转呀。

请问大圣，如果把useTodos单独抽成一个js文件，改js里的文件，浏览器界面不会自动热重载，有啥解决方法没？是改webpack的配置吗？

ref的副作用也可以用$ref解决是什么意思？哪里能找到这个语法介绍吗？