Comments on the communication page

[chengpeiquan]

~

[xd20110642]

感谢大佬的开源文档! 仔细拜读以后受益匪浅!

[chengpeiquan]

感谢大佬的开源文档! 仔细拜读以后受益匪浅!

多谢支持！多多交流 😊

[CHEN-Jing194]

感谢大佬加一 官方文档看得人脑壳有点晕 看了大佬的文档立马就有上手vue3的冲动了 script-setup太香了 评论的gitalk总是连不上 辗转到这里来给大佬打call👍👍

[chengpeiquan]

感谢大佬加一 官方文档看得人脑壳有点晕 看了大佬的文档立马就有上手vue3的冲动了 script-setup太香了 评论的gitalk总是连不上 辗转到这里来给大佬打call👍👍

哈哈哈感谢认可和支持！

[leovoon]

非常受用,感谢！ 我把您的文档 pr 添加到了 这里 ， 您看行不 😊

[chengpeiquan]

非常受用,感谢！ 我把您的文档 pr 添加到了 这里 ， 您看行不 😊

哇！非常感谢！！！

[jinzhongjia]

感谢大佬的文档，讲解很详细😁，目前官方文档极度不全，尤其是setup和<script setup>，这两部分的讲解很少

[chengpeiquan]

@yingyi666
感谢大佬的文档，讲解很详细😁，目前官方文档极度不全，尤其是setup和<script setup>，这两部分的讲解很少

感谢认可！开心！

[Jinl-k]

感谢大佬一直更新，作为一个新手受益匪浅😁

[chengpeiquan]

感谢大佬一直更新，作为一个新手受益匪浅😁

哈哈哈谢谢！加油！

[z1050729352]

很棒！看了一年了v3都是在这学的，感谢

[chengpeiquan]

很棒！看了一年了v3都是在这学的，感谢

哇！这么久了！感谢这么长时间的支持！

[yyqxjwxy]

啥时候更新pina啊

[ryanysl]

牛逼666, 写了半年vue3, 有很多东西不清楚, 今天看了这里才明白!

[z1050729352]

牛逼666, 写了半年vue3, 有很多东西不清楚, 今天看了这里才明白!

你加了条评论咋通知到我邮箱来了😂

[ryanysl]

@z1050729352

牛逼666, 写了半年vue3, 有很多东西不清楚, 今天看了这里才明白!

你加了条评论咋通知到我邮箱来了😂

不是你设置的吗? 😄

[chengpeiquan]

牛逼666, 写了半年vue3, 有很多东西不清楚, 今天看了这里才明白!

谢谢！互相学习哈哈哈😄

[Lichmaker]

作者您好，又来向您请教了。
在 Reative State 章节中，描述了一种状态共享库的使用，通过一个组件来统一管理状态。
我这里有一个疑惑， import 一个组件时，组件是单例还是多例的呢？ 从这一章节看来是单例的，因为 Father.vue 和 Child.vue 引入了 state 之后，都能共同访问和修改 state 中的响应式变量。
如果我一个应用中，需要多次重复引用一个组件，怎么可以做到相互隔离呢？

[chengpeiquan]

作者您好，又来向您请教了。 在 Reative State 章节中，描述了一种状态共享库的使用，通过一个组件来统一管理状态。 我这里有一个疑惑， import 一个组件时，组件是单例还是多例的呢？ 从这一章节看来是单例的，因为 Father.vue 和 Child.vue 引入了 state 之后，都能共同访问和修改 state 中的响应式变量。 如果我一个应用中，需要多次重复引用一个组件，怎么可以做到相互隔离呢？

是担心多次渲染同一个组件时，组件之间也会互相影响吗？组件本身是有隔离的，多次重复渲染同一个组件，内部变量也不会互相影响，这里简单写一个子组件，暴露一个内部变量给父组件操作：

<!-- Child.vue -->
<template>
  <div>num: {{ num }}</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const num = ref(1)
defineExpose({ num })

watch(num, (val) => {
  console.log('内部变化观察', val)
})
</script>

父组件在 <template /> 里引用两次，并通过 ref 操作其数据变化：

<!-- Father.vue -->
<template>
  <Child ref="child1" />
  <Child ref="child2" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Child from '@cp/Child.vue'

const child1 = ref()
const child2 = ref()

setTimeout(() => {
  child1.value.num = 111
  child2.value.num = 222
}, 1000)
</script>

可以看到渲染的两个 num 会有不同的值，不会互相污染。

[rayadaschn]

我又来了，一个较为重要的 Bug？
问题： 在父子组件通信这一节中 Dom元素与子组件 关于子组件节点类型定义，不应该使用 typeof 操作符获取，typeof 获取到的是子组件的构造器，而并非实例。
解决方案: 应该使用 ref()。这样的好处，不用在 ref 处定义为 null；并且操作子组件上所抛出的方法函数/变量时能够获得较好的语法提示。官网解决方案: TypeScript with Composition API

[chengpeiquan]

我又来了，一个较为重要的 Bug？ 问题： 在父子组件通信这一节中 Dom元素与子组件 关于子组件节点类型定义，不应该使用 typeof 操作符获取，typeof 获取到的是子组件的构造器，而并非实例。 解决方案: 应该使用 ref()。这样的好处，不用在 ref 处定义为 null；并且操作子组件上所抛出的方法函数/变量时能够获得较好的语法提示。官网解决方案: TypeScript with Composition API

好嘞，我稍后看看

[chengpeiquan]

我又来了，一个较为重要的 Bug？ 问题： 在父子组件通信这一节中 Dom元素与子组件 关于子组件节点类型定义，不应该使用 typeof 操作符获取，typeof 获取到的是子组件的构造器，而并非实例。 解决方案: 应该使用 ref()。这样的好处，不用在 ref 处定义为 null；并且操作子组件上所抛出的方法函数/变量时能够获得较好的语法提示。官网解决方案: TypeScript with Composition API

好嘞，我稍后看看

线上版本其实在去年 11 月我就已经移除 null 的初始化了（在 d75e7fb 这个 commit 里，你引用的那个 Markdown 文件是比较旧的 Fork 版本），当时第一次写的时候是参考 document.querySelector 的取值情况，不存在时返回 null ，但每一次声明都使用 null 初始化在代码上可能略显繁琐，后面移除它是考虑到通常判断 Falsy 值或者可选链并不太需要严格使用 null ，所以使用默认的初始值 undefined 就可以了。

原来的 typeof 也不会说是 BUG ，只是类型推导没有配合 InstanceType 那么进一步详细，组件的 Props 和方法还是可以获得类型提示的，不过新官网加上的这个 InstanceType 工具类型很实用！我去加上去说明~谢谢反馈！

[rayadaschn]

我又来了，一个较为重要的 Bug？ 问题： 在父子组件通信这一节中 Dom元素与子组件 关于子组件节点类型定义，不应该使用 typeof 操作符获取，typeof 获取到的是子组件的构造器，而并非实例。 解决方案: 应该使用 ref()。这样的好处，不用在 ref 处定义为 null；并且操作子组件上所抛出的方法函数/变量时能够获得较好的语法提示。官网解决方案: TypeScript with Composition API

好嘞，我稍后看看

线上版本其实在去年 11 月我就已经移除 null 的初始化了（在 d75e7fb 这个 commit 里，你引用的那个 Markdown 文件是比较旧的 Fork 版本），当时第一次写的时候是参考 document.querySelector 的取值情况，不存在时返回 null ，但每一次声明都使用 null 初始化在代码上可能略显繁琐，后面移除它是考虑到通常判断 Falsy 值或者可选链并不太需要严格使用 null ，所以使用默认的初始值 undefined 就可以了。

原来的 typeof 也不会说是 BUG ，只是类型推导没有配合 InstanceType 那么进一步详细，组件的 Props 和方法还是可以获得类型提示的，不过新官网加上的这个 InstanceType 工具类型很实用！我去加上去说明~谢谢反馈！

谢谢您的耐心回复，感觉自己对一些知识点的理解还是太过浅显了。也没有想明白，反倒是显得有点急躁了。

原先理解：像此图所示，虽然没有报错，但是没有较好的语法提示。

利用 InstanceType 后，能够得到较好的 TypeScript 语法支持。

之前对此现象不是很理解，后来才知是构造函数同实例侧的区别。

最后，还是非常感谢您的回复，个人转码才 1 年，确实很多基础较为孱弱。

另，您《Vue3 入门指南与实战案例》线上的版本之前已经不再更新的话，不知道能不能和您交互微信？

WeChat ID: To_The_Beacon

[chengpeiquan]

我又来了，一个较为重要的 Bug？ 问题： 在父子组件通信这一节中 Dom元素与子组件 关于子组件节点类型定义，不应该使用 typeof 操作符获取，typeof 获取到的是子组件的构造器，而并非实例。 解决方案: 应该使用 ref()。这样的好处，不用在 ref 处定义为 null；并且操作子组件上所抛出的方法函数/变量时能够获得较好的语法提示。官网解决方案: TypeScript with Composition API

好嘞，我稍后看看

线上版本其实在去年 11 月我就已经移除 null 的初始化了（在 d75e7fb 这个 commit 里，你引用的那个 Markdown 文件是比较旧的 Fork 版本），当时第一次写的时候是参考 document.querySelector 的取值情况，不存在时返回 null ，但每一次声明都使用 null 初始化在代码上可能略显繁琐，后面移除它是考虑到通常判断 Falsy 值或者可选链并不太需要严格使用 null ，所以使用默认的初始值 undefined 就可以了。
原来的 typeof 也不会说是 BUG ，只是类型推导没有配合 InstanceType 那么进一步详细，组件的 Props 和方法还是可以获得类型提示的，不过新官网加上的这个 InstanceType 工具类型很实用！我去加上去说明~谢谢反馈！

谢谢您的耐心回复，感觉自己对一些知识点的理解还是太过浅显了。也没有想明白，反倒是显得有点急躁了。

原先理解：像此图所示，虽然没有报错，但是没有较好的语法提示。

利用 InstanceType 后，能够得到较好的 TypeScript 语法支持。

之前对此现象不是很理解，后来才知是构造函数同实例侧的区别。

最后，还是非常感谢您的回复，个人转码才 1 年，确实很多基础较为孱弱。

另，您《Vue3 入门指南与实战案例》线上的版本之前已经不再更新的话，不知道能不能和您交互微信？

WeChat ID: To_The_Beacon

可以啊，我加你啦

[Karwin3]

作者你好。 组件之间的通信 中的 v-model/emit 通信，从vue3.4 开始，vue 推荐使用defineModel。这部分内容是否需要更新？