这是一个创建于 1109 天前的主题，其中的信息可能已经有所发展或是发生改变。
标题描述的可能不太好，请看下面 demo
router.js
const routes = [ { path: '/board/:boardId', component: board } ] app.vue
<template> <router-link to="/board/1">画板 1</router-link> <router-link to="/board/2">画板 2</router-link> <router-view /> </template> board.vue
<template> <div>画板 {{ $route.params.boardId }}</div> <button @click="addP">添加一个段落</button> <div class="container"></div> </template> <script setup> function addP() { let p = document.createElement('P') p.innerText = '新增内容' document.querySelector('.container').appendChild(p) } </script> 大概就是有两个画板，点击按钮就会切换画板，画板都是由 board 组件复用生成的，在画板中可以添加文本
我需要的功能是两个画板互不影响，在画板 1 中添加文字后，切换到画板 2 ，画板 2 上是没有画板 1 中文字
即下图中效果：
但实际的效果：
原因我也知道，复用组件生成的页面之间切换，代码不会重复执行
那怎样才能保持两个画板的独立呢？
之前请教的一个问题中，@vinsony 老哥提供了一种绑定 key 的思路
我改了下 demo 中 app.vue 实现了预定的效果
<template> <router-link to="/board/1">画板 1</router-link> <router-link to="/board/2">画板 2</router-link> <router-view v-slot="{ Component, route }"> <keep-alive> <component :is="Component" :key='route.fullPath'/> </keep-alive> </router-view> </template> 但是 @Zzzz77 老哥说绑定 key 这种骚操作有点野路子，那不绑定 key 怎么解决这个问题呢？
 | 1 signalas1 2022-10-01 17:54:21 +08:00 如果你不能把两个画板的所有 UI 状态都数据化，就只能用显隐来做。 |
 | 2 renmu 2022-10-01 18:35:35 +08:00 via Android 加 key 解决成本最低，要么你就 watch route.path 然后重新处理初始化逻辑 |
 | 3 dumbass 2022-10-01 19:11:37 +08:00 via iPhone 绑定 key 并不是野路子，vue router 官方文档有提过 |
| 4 dumbass 2022-10-01 19:21:25 +08:00 via iPhone @bojackhorseman 抱歉我记错了，不过官方的建议是 watch 路由信息 |
 | 5 tyx1703 2022-10-01 20:21:18 +08:00  2 首先你这个添加段落的方式就不对，不要直接操作 DOM ，而是用一个数组保存起来，在模板中渲染。要理解 UI 就是数据，数据就是 UI 。 根据你的需求，可以用一个 boardId 为键，段落列表 为值的对象保存，然后用计算属性获取当前路由下的段落列表再进行渲染。 |
 | 6 WhateverYouLike 2022-10-01 20:31:41 +08:00 via Android  1 这是 vue3 的 feature ，名为 static hoisting 。 今天刚写了一篇文章： https://jaufey-blog.vercel.app/blog/static-hoisting/ |
 | 7 gouflv 2022-10-01 22:36:46 +08:00 via iPhone 展开说说怎么个野路子、骚炒作？ 这不就是基本操作吗 |
 | 8 liyang5945 2022-10-01 23:13:04 +08:00 via Android 在 vue 里操作 dom ，你这才是骚操作野路子 |
 | 9 arnosolo 2022-10-02 07:46:48 +08:00 可是为什么要放在两个路由下? |
 | 10 RabbitDR 2022-10-02 11:42:48 +08:00 可以把状态提升到父组件，或者其它地方，然后把状态传到子组件 也可以 keep-alive + key 组合，但挂载多个组件 还可以如 5 楼 所说，自己管理状态，根据路径渲染不同的列表 |
 | 11 Zzzz77 2022-10-02 12:26:47 +08:00 1 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> <CildA :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 强行让子组件重复渲染了。 |
| 12 Zzzz77 2022-10-02 12:46:05 +08:00 |
 | 13 simple233 2022-10-02 17:17:47 +08:00 via iPhone 在画板组件里直接监听路由，路由改变清空数据就行了，我记得官方文档也是这么做的 |
Select Language