Comments on the component page

[chengpeiquan]

~

[justforuse]

但是在使用 ref 时，不能这样子声明，会报错，正确的声明方式应该是使用 <> 来包裹类型定义，紧跟在 ref API 之后：

感觉这里容易引起歧义，确实有报错，但是是因为此时变量类型为Ref对象，而非简单的数据类型(string or number...)。这样说容易理解成不支持类型写在变量后的语法🤔

[chengpeiquan]

但是在使用 ref 时，不能这样子声明，会报错，正确的声明方式应该是使用 <> 来包裹类型定义，紧跟在 ref API 之后：

感觉这里容易引起歧义，确实有报错，但是是因为此时变量类型为Ref对象，而非简单的数据类型(string or number...)。这样说容易理解成不支持类型写在变量后的语法🤔

啊哈哈哈好，我记下来，回头优化一些相关的部分~

[zcc0329]

大佬文章里说deep默认都是true，我测试发现：watch函数，传入一个ref过的对象，无法监测到内部变化，需要主动传入deep: true；如果传入reactive过的对象，可以监测到内部的变化，说明deep不是全部都默认传入true。

[chengpeiquan]

大佬文章里说deep默认都是true，我测试发现：watch函数，传入一个ref过的对象，无法监测到内部变化，需要主动传入deep: true；如果传入reactive过的对象，可以监测到内部的变化，说明deep不是全部都默认传入true。

感谢反馈！已更正！

[ZiuChen]

数据的监听 > watchEffect > 和 watch 的区别

实际上这三者是等效的：

  bar() // 先执行bar()进行初始化
  watch(foo, bar) // 添加监听，以响应后续的变化

  watchEffect(bar) // 立即执行一次并响应后续变化

  // 补充
  watch(foo, bar, { immediate: true }) // 初始化时即立即执行一次bar()

[zzxCNCZ]

学习了

[zebraoo]

可以加一些setup语法糖的描述吗？

[chengpeiquan]

可以加一些setup语法糖的描述吗？

script-setup 语法糖我放在 高效开发 这一章里面了，因为考虑到如果标准写法都还不熟悉的情况下，再马上接触语法糖，可能会很乱，所以前面的内容都统一使用标准写法，最后才写语法糖~

[ZhongFuze]

太好了，让我刷到您的总结! 做后端的需要一些前端轮子！看完就调通了！

[SakuraYuki]

在函数的声明和使用那个章节，有一个代码错误，changeMsg应该是updateMsg

[chengpeiquan]

在函数的声明和使用那个章节，有一个代码错误，changeMsg应该是updateMsg

谢谢，已修正，之前这里一开始是命名 change 的，后面改成 update 后漏了这里

[EndlessShw]

很高兴能阅读到非常棒的文章；作为一名入门没有很久的后端开发者，通篇阅读“单组件的编写”这一章后，有几个问题想请教作者，还请赐教：

1. 在读到“响应式 API 之 ref -- DOM 元素与子组件”中，其例子：

   import Child from '@cp/Child.vue'

   是表明在项目中创建文件夹 cp，并创建子组件 Child.vue 吗？我在实现改案例时，其报错：

   Module not found: Error: Can't resolve '@cp/Child.vue' in 'D:\Vue-Projects\vue-demo\src'

   我是否需要创建 src\cp\Child.vue 呢？如果需要创建，里面的内容该是什么呢？
   此外，在“插槽 -- 默认插槽”中的例子我也遇到了相似的情况。

2. 同样的，作者大大好像只提及了 setup 的使用，但是 components 好像没有提及，如果可以的话，希望作者大大可以补充一下，谢谢了。

   组件基础：https://cn.vuejs.org/guide/essentials/component-basics.html#using-a-component

3. 在读到“数据的计算 -- computed 的应用场景之前时”，我突然想到：如果有“数据需要随着其他数据的变化而变化”的业务场景时，watch 侦听和使用 computed 有什么区别？为什么不用 watch？后来我花了些时间通过查阅一下得到以下结论：

   Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch，然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

   来源：https://zhuanlan.zhihu.com/p/72541791

   作者您也提到过：

   这个时候 computed 的 setter 就可以妙用了，只需要一个简单的 computed ，就可以代替 input 的 change 事件或者 watch 侦听，可以减少很多业务代码的编写。

   因此为了防止新手出现所谓的“滥用 watch 的情况”，我建议作者大大可以考虑在此特意点出一下。

以上就是我的一些问题和观点；可能由于我的前端知识过于薄弱，部分问题可能过于幼稚，以至于让您厌烦，在这里深感抱歉；如果可以的话，指条解决问题的路径，对我来说也是再好不过了。

[chengpeiquan]

很高兴能阅读到非常棒的文章；作为一名入门没有很久的后端开发者，通篇阅读“单组件的编写”这一章后，有几个问题想请教作者，还请赐教：

1. 在读到“响应式 API 之 ref -- DOM 元素与子组件”中，其例子：

   import Child from '@cp/Child.vue'

   是表明在项目中创建文件夹 cp，并创建子组件 Child.vue 吗？我在实现改案例时，其报错：

   Module not found: Error: Can't resolve '@cp/Child.vue' in 'D:\Vue-Projects\vue-demo\src'

   我是否需要创建 src\cp\Child.vue 呢？如果需要创建，里面的内容该是什么呢？
   此外，在“插槽 -- 默认插槽”中的例子我也遇到了相似的情况。

2. 同样的，作者大大好像只提及了 setup 的使用，但是 components 好像没有提及，如果可以的话，希望作者大大可以补充一下，谢谢了。

   组件基础：https://cn.vuejs.org/guide/essentials/component-basics.html#using-a-component

3. 在读到“数据的计算 -- computed 的应用场景之前时”，我突然想到：如果有“数据需要随着其他数据的变化而变化”的业务场景时，watch 侦听和使用 computed 有什么区别？为什么不用 watch？后来我花了些时间通过查阅一下得到以下结论：

   Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch，然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
   来源：https://zhuanlan.zhihu.com/p/72541791

   作者您也提到过：

   这个时候 computed 的 setter 就可以妙用了，只需要一个简单的 computed ，就可以代替 input 的 change 事件或者 watch 侦听，可以减少很多业务代码的编写。

   因此为了防止新手出现所谓的“滥用 watch 的情况”，我建议作者大大可以考虑在此特意点出一下。

以上就是我的一些问题和观点；可能由于我的前端知识过于薄弱，部分问题可能过于幼稚，以至于让您厌烦，在这里深感抱歉；如果可以的话，指条解决问题的路径，对我来说也是再好不过了。

你好啊，太客气了！这几个问题我来说下：

第一个问题是这样子： @cp 是配置了一个 alias 别名，指向了 @/components 目录，当时是在比较前面的 “脚手架的升级与配置” 一章里，在 调整 TS Config 这里提到了这个配置，通常 TypeScript 项目除了在 vite.config.ts 配置了别名后，在 tsconfig.json 文件里也要配置下对应的别名指向，不然可能编译不过。如果在开发中看到其他人的代码里有类似的指向，也是这个情况~

第二个问题提到的 components 组件选项，这个选项本身没有太多的注意事项，但在实际业务中启用子组件时，通常会涉及到跨组件通信等问题，这部分的问题就很多内容和注意事项了，还有很多种开发场景，所以我是放在了 组件之间的通信 这一章单独里面讲通信的内容， “单组件的编写” 那一章主要讲的是单个组件里面的开发和常见问题。

第三个问题我去加个提示引导~ 谢谢你的建议！

[SifungLei]

// 在这里结构 。这里有错误字。应该是解构，而不是结构。

[chengpeiquan]

// 在这里结构 。这里有错误字。应该是解构，而不是结构。

谢谢，已更正啦~

[SifungLei]

ref的介绍中，应该加上ref变量的使用说明：在<script>中定义的ref变量，return出去后，可以在<template>中直接使用而不用加.value。这就能解释为什么toRefs的变量被解构后(解构后是n个ref变量)能直接在<template>中使用而不用加.value。

[wanglihuaya]

大佬这里，但是嵌套层级一多，的模板会难以维护。 是不是多了一个“的”字

[chengpeiquan]

大佬这里，但是嵌套层级一多，的模板会难以维护。 是不是多了一个“的”字

谢谢，这两天比较忙刚来跟进，包括昨天的另外一处都已修正，感谢！

[hellodword]

要是可以有一个开关“隐藏”掉所有 Vue 2 的内容就好了，即只关注 Vue 3 的版本（就像是一个 minimal 分支）。我觉得对二者均没有很多了解的人阅读这个页面时会因为太多的对比而产生阅读和理解上的负担，读起来没有前面几篇的精简流畅感。

[19774279]

能不能介绍一下代码都是在哪个脚手架创建项目的哪个页面里跑呢？我使用preset init hello-vue --template vue3-ts-vite创建了项目，然后修改项目里的bar.vue，运行“响应式API之toRef与toRefs---在业务中的具体运用”下面的代码，跑不通，提示的错误又没什么头绪，在网上找了好多宣称能实时运行VUE代码的网站，也无法运行代码。

[19774279]

能不能介绍一下代码都是在哪个脚手架创建项目的哪个页面里跑呢？我使用preset init hello-vue --template vue3-ts-vite创建了项目，然后修改项目里的bar.vue，运行“响应式API之toRef与toRefs---在业务中的具体运用”下面的代码，跑不通，提示的错误又没什么头绪，在网上找了好多宣称能实时运行VUE代码的网站，也无法运行代码。

找到问题了，bar.vue里页面里script标签是<script setup lang="ts">，就是这个setup和示例代码的export default冲突。这个细节对于新手来说太坑了。

[chengpeiquan]

能不能介绍一下代码都是在哪个脚手架创建项目的哪个页面里跑呢？我使用preset init hello-vue --template vue3-ts-vite创建了项目，然后修改项目里的bar.vue，运行“响应式API之toRef与toRefs---在业务中的具体运用”下面的代码，跑不通，提示的错误又没什么头绪，在网上找了好多宣称能实时运行VUE代码的网站，也无法运行代码。

找到问题了，bar.vue里页面里script标签是<script setup lang="ts">，就是这个setup和示例代码的export default冲突。这个细节对于新手来说太坑了。

反馈收到！这个是 Vue 3 后面推出的一个 script-setup 模式，当时文档统一放在 高效开发 这一章里统一讲了，这个 Starter 在迭代过程中慢慢也默认过渡到了这个模式下，我来优化下这个情况，补充些说明到文档里，以及给默认组件也加一些注释说明

[chengpeiquan]

能不能介绍一下代码都是在哪个脚手架创建项目的哪个页面里跑呢？我使用preset init hello-vue --template vue3-ts-vite创建了项目，然后修改项目里的bar.vue，运行“响应式API之toRef与toRefs---在业务中的具体运用”下面的代码，跑不通，提示的错误又没什么头绪，在网上找了好多宣称能实时运行VUE代码的网站，也无法运行代码。

找到问题了，bar.vue里页面里script标签是<script setup lang="ts">，就是这个setup和示例代码的export default冲突。这个细节对于新手来说太坑了。

文档里已补充了一个阅读提示在相关章节的最前面
https://vue3.chengpeiquan.com/component.html

Starter 方面也有其他读者提了一个 issue 见 #299 ，我另外找时间单独优化哈~谢谢你的反馈，带来的困扰也很不好意思！