翻译表述有误
xtyuns opened this issue · 5 comments
相关文件: src/api/special-attributes.md
EN:
and elements with keys that are no longer present will always be removed/destroyed.
CN:
并且 key 不再存在的元素将始终被移除/销毁。
原文所表达的意思应该是:当那些使用 key 的元素不再出现时将会被移除/销毁。
不同点在于:是元素不存在时被移除,而非key不存在时被移除
原文所表达的意思应该是:
当那些使用 key 的元素不再出现时将会被移除/销毁。
原翻译表达的确是有点歧义,但不是这样的。应该这样说:
那些使用了已经不存在的 key 的元素将会被移除/销毁。
但是我通过以下案例测试了删除key对元素的影响,但是它并没有产生销毁元素的效果
(我不确定该案例是否能说明这个问题)
<div id="app"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.5/vue.global.min.js"></script>
<script>
Vue.createApp({
setup: function() {
const store = Vue.reactive([
{id:0, v:0},
{id:1, v:1},
{id:2, v:2}
])
Vue.onMounted(() => {
console.log('onMounted', Vue.toRaw(store))
})
const removeId = () => {
store.forEach(item => delete item.id)
console.log('delete id', Vue.toRaw(store))
}
return {store, removeId}
},
render() {
return Vue.h('div', {}, [
Vue.h('ul', {}, this.store.map(item => Vue.h('li', { key: item.id }, item.v))),
Vue.h('button', { onClick: this.removeId }, 'remove Key')
])
}
}).mount('#app')
</script>
那些使用了已经不存在的 key 的元素将会被移除/销毁。
这个翻译确实是正确的,是我之前的理解有误
但是关于上面的那个案例,这的确使我不太能够理解,也有可能是我没有真正理解文档中所表述的概念。
@xtyuns 因为 key
的赋值过程是值传递,而不是引用传递.所以删除 item.id 并不会影响到 key.
这也就是为什么vue推荐用 string | number类型来作为key
的值
Don't use non-primitive values like objects and arrays as v-for keys. Use string or numeric values instead.
https://v3.vuejs.org/guide/list.html#maintaining-state
如果想做测试用例的话,应该是通过ref引用直接操作dom元素修改成新的不存在的key值
(这个列表的元素都有key值,我不确定创建一个没有key值的元素会不会被复用之前的元素,感觉最好是修改成新的key值)
- 关于翻译的表述已经达成了一致。
- 关于 key 的使用问题我将私下再参考其他实例看一下。
稍后我将提交 PR 来关闭此 Issue。