用key管理可服用的元素
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。用key则可以表达不要复用的元素。
例如:
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template>
那么在上面的代码中切换 loginType
将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,<input>
不会被替换掉,仅仅是替换了它的 placeholder
。
而使用key值后,输入框每次切换会重新渲染,<label>
元素仍然会被高效地复用,因为它们没有添加 key
属性。
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> |
v-if与v-show
都是满足条件时展示。
v-if是真正的渲染,条件不符时不渲染,直到为真时开始渲染。
v-show 不管是否符合都会渲染,只是通过css控制显隐性。
v-if有更高的切换开销,v-show有更高的初次渲染开销,需频繁切换时用v-show。