Comments (5)
原文所表达的意思应该是:
当那些使用 key 的元素不再出现时将会被移除/销毁。
原翻译表达的确是有点歧义,但不是这样的。应该这样说:
那些使用了已经不存在的 key 的元素将会被移除/销毁。
from docs-next-zh-cn.
但是我通过以下案例测试了删除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>
from docs-next-zh-cn.
那些使用了已经不存在的 key 的元素将会被移除/销毁。
这个翻译确实是正确的,是我之前的理解有误
但是关于上面的那个案例,这的确使我不太能够理解,也有可能是我没有真正理解文档中所表述的概念。
from docs-next-zh-cn.
@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值)
from docs-next-zh-cn.
- 关于翻译的表述已经达成了一致。
- 关于 key 的使用问题我将私下再参考其他实例看一下。
稍后我将提交 PR 来关闭此 Issue。
from docs-next-zh-cn.
Related Issues (20)
- bug: 组件自闭合会导致后面的内容无法显示 HOT 1
- 开启生产环境模式 HOT 8
- vue3.2.12版本defineExpose返回的数组会被深度reactive化(数组内部的对象会变成proxy) HOT 1
- bug:
- Caveats 如何翻译的问题 HOT 7
- Vue支不支持在浏览器中直接运行vue单文件呢 HOT 1
- When I use Jump to the main content link function + vue - while on a router cannot jump to the main content HOT 1
- bug: 在vue3的组件中,父组件给子组件传入一个router-link的to的路径 ,子组件读取不到 HOT 1
- bug: [文档]渲染函数-创建组件-vnode可能错误 HOT 1
- bug: 修改响应式 property 的代码示例错误使用this HOT 4
- sleight-of-hand 是否翻译为 “微调” 比较合适呢? HOT 2
- 关于transition动画里的文档错误 HOT 2
- bug: 中文文档中自定义指令描述错误! HOT 4
- array-refs中的文案错误 HOT 1
- 有没有完整示例代码? HOT 1
- bug: vue3.2.29通过v-for显示component组件通过ref调用子组件方法时提示子组件方法为undefined
- bug: vue3.2.29通过v-for显示component组件通过ref调用子组件方法时提示子组件方法为undefined HOT 1
- 对于远端动态组建的api有支持吗
- 该版本文档停止更新,欢迎去新版文档贡献 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from docs-next-zh-cn.