一回事啊，和叠不叠起来没关系，赋予颜色值的新 canvas 是原样把原 canvas 再绘制一遍，该什么层级还是什么层级，你要做的只是将新画布上对应点的颜色和你预先生成的颜色做对比就行，这个是画板类应用的常见处理方式

补充：假设你有一个画布，上面有一个圆一个正方形。那么你绘制的时候可以绘制两个 canvas ，一个是你正常显示的 canvas1 ，另一个 canvas 中为内部元素赋予随机颜色值，例如正方形红色，圆形绿色，然后把这个 canvas 给 display none ，我们命名为 canvas2 。最后鼠标点击的时候，获取到鼠标坐标，通过该坐标在 canvas2 中获取到对应位置的颜色值，如果是红色就代表点在正方形上，绿色就表示点在圆形上，以此类推

额，这个问题其实很常见，可以参考 konva.js 的做法，核心在于：为 canvas 中每一个元素赋一个随机的颜色（但不显示），然后通过对比鼠标点击位置像素的颜色值来判断。

网友：Angular YYDS
现实：公司让用什么你就用什么

继续上面的补充：
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96

你的案例在 Vue 官网上已经说得非常明白了。

@BaiLinfeng 当然呀，一般情况组件只有被载入的时候会初始化一次，例如第一次加载，例如从 v-if="false"到 v-if="true"后。各个生命周期也就是在这时候开始执行的。

1 、从上个问题和这个问题的示例就能看出来，OP 完完全全不理解 MV*，正确的做法 #5 已经说的非常非常非常清楚了。
2 、首先明确一个点：OP 绑定 key 的目的是让子组件重新渲染，以此到达重新执行生命周期的目的。且不说你的例子中是否真的有重新执行生命周期的需求，即使真的有，也不该使用这种手段，举个例子：

正常的做法：
```
// 父组件
<template>
<ChildA :count="count" />

<button @click="count = count + 1">add</button>
</template>

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

const count = ref(1)
</script>
```

```
// 子组件
<template>
<div>{{count}}</div>
</template>

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

const props = defineProps({
count: {
type: Number,
required: true,
},
})

const func = () => {
console.log('render')
}

watch(() => props.count, func, { immediate: true })
</script>
```

OP 的做法：
```
// 父组件
<template>
<ChildA :count="count" :key="count" />

<button @click="count = count + 1">add</button>
</template>

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

const count = ref(1)
</script>
```

```
// 子组件
<template>
<div>{{count}}</div>
</template>

<script lang="ts" setup>
defineProps({
count: {
type: Number,
required: true,
},
})

const func = () => {
console.log('render')
}

func()
</script>
```

后者的问题：
①不易理解（特别是新手）。
②性能问题。
③最重要的一点，由于可控的粒度过大，很容易导致 BUG 。因此能 watch 解决的一般都不会选择这样去操作。

3 、继续强调刚才提到的一个点，OP 很多 [重新执行生命周期] 的需求根本就是伪需求，在之前的例子中完全没有必要，在本帖的例子中也没有必要（如#5 所讲的）。其实只是一个子组件接收父组件响应式数据的简单问题，就更没有必要绑定 key 强行让子组件重复渲染了。

@yezheyu #20 这种情况你不需要绑定这个 key 啊，父组件传递的 data 发生了改变，User 中接收的 data 这个 prop 自然会跟着变。楼上让绑定 key 只是为了让组件重新渲染从而达到重新执行生命周期这个目的，这是一种偏门骚操作，除非有什么极其特殊的需求（反正我没遇到过），不然绝对不推荐这么做，而你的需求只是最基本的父子组件传值而已，当然也不该这么做，如果有取值以外的副作用需要执行，正常 watch 就行。

这就是最基础的父子组件啊，首先 props 的定义是必须的，不理解 OP 为什么会选择用 attrs.name 这种方式来取父组件的值..

其次`User 组件内部的代码只会执行一次，`console.log` 不会随着 button 的点击事件执行多次`，这是当然的，和响应式无关，不管 name 变不变，console.log 肯定都只会执行一次。如果需要在 name 变化时执行一些副作用，watch 是最正统的方式，#8 的方法不建议...#16 的方法可行，但这明显更倾向 React 的思维

好奇请问下 OP ，独立开发小程序的收益能够填补上微信每年认证费用和服务器 /Serverless 相关的费用吗？

试试阮一峰周刊

学校期间可能有用，出了学校没用（除非你打算开公司）。

不清楚 OP 开发这款产品是为了：1 单纯学习练手？ 2 希望以此获利？ 3 基于兴趣做开源？
1 的话其实做什么无所谓了，只要脱离开自己的舒适圈就好。
2 的话需要和市面上的产品拼竞争力，我也觉得白板或者低代码之类的东西市面上太多了，没啥竞争力。。
3 的话需要和同类开源作品拼竞争力，比 2 容易些，看你有无信心做得比其他开源项目更好了。

你的问题。
1 、确实觉得不值得换一家就行，虽然考虑到你有砍价的成分在，但在我看来说人家破盘子有些过了。（但整体来说这不是重点）
2 、看你的描述是你先带情绪发脾气。（这才是重点）

console.log 真的够用了，之前看 antfu 直播，也有人问这个问题，他说他也是只用 console 的

我个人完全没有导航站的需求..之前也用过一些自定义导航的浏览器插件，相比浏览器默认空白页，打开时总会加载一下，极其不适....
另外在实用性方面：
对于常用的网站，相比较在一推导航中找到目标，我觉得直接输网址更效率，一般输入前两三个字母，后面就全出来了....
而对于不常用的网站，全部摆在首页，密密麻麻只会影响检索效率，还不如折叠起来，那这和浏览器自带的收藏不是一回事么....

大厂出来后能找到什么水平的工作？
如果在国内换中小公司能不能接受？
如果出国是定居还是打算以后回来养老？
以后打算回来还能回不？
能否承受出国失败的风险（时间、金钱）？
出国准备带家人吗？
家里老人想好怎么安顿了吗？
以后有小孩怎么安置？
你 /你的家人外语水平如何？
你们社交能力、性格如何？能否接受陌生环境（社交、当地文化）？
你到国外大概能搞个什么档次的工作，和国内对比有什么优劣势？

上面这些问题你自己想清楚七七八八了，你估计也知道该怎么选了，你要是自己都搞不清楚，到网上来问，相信我，在当前润学成灾的环境下（像楼上有人说的已经魔怔了），大家都会让你赶紧出国，跑晚了都是血亏。

我不是针对谁，我是说，所有能用所谓的低代码平台开发出来的网站 /系统 /应用，都是入门级 /初级产品（开发 /维护难度上）....

如果说害怕工作被这类东西取代，还不如考虑下怎么和这几年大量涌入市场的初级程序员竞争来得现实些....

> “无数的人相信电视剧，将电视剧里描述的东西当成人生的一个追求，或者当成是自己想要过的一种理想生活”

没有吧，正常人都知道电视是演的，是假的，看电视刷视频就图一乐，谁会把电视里面的当追求啊。。。。。