vue特殊属性 key ref slot

1.key

当使用key时，必须设置兄弟元素唯一的key，当key排列顺序变化时，兄弟元素会重新排列，而当key的值变化时，这个元素会被重新渲染。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

例子 v-if中用 key 管理可复用的元素

允许用户在不同的登录方式之间切换:

<template>
  <div id="app">
    <button @click="changeState">切换</button>
    <template v-if="loginType==='username'">
      <label>username</label>
      <input type="text" placeholder="输入username">
    </template>
    <template v-else>
      <label >email</label>
      <input type="text" placeholder="输入email">
    </template>
  </div>
</template>

<script>
export default {
  data(){
    return{
      loginType:'username'
    }
  },
  methods:{
    changeState(){
      this.loginType='email'
    }
  }
}
</script>

 

那么在上面的代码中切换 loginType 将不会清除用户在input里面已经输入的内容。因为两个模版使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。
这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input type="text" placeholder="输入username" key="username-input"> 
</template> 
<template v-else> 
　<label>Email</label> 
  <input type="text" placeholder="输入email" key="email-input"> 
</template>

现在，每次切换时，输入框都将被重新渲染。注意, <label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。

 

 

例子 v-for中的key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
      这个默认的模式是有效的，但是只适用于不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。

     为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值（在这里使用简写）：

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

  建议尽可能使用 v-for 来提供 key ，除非迭代 DOM 内容足够简单，或者你是故意要依赖于默认行为来获得性能提升。因为它是 Vue 识别节点的一个通用机制， key 并不特别与 v-for 关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。

 

 

2.ref

ref如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素

ref如果用在子组件上，引用就指向组件实例：

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

vue中的 ref 和 $refs

如图，ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合，

console.log(this.$refs.input1)//<input type="text" id="input1">
console.log(document.getElementById('input1'))//<input type="text" id="input1">

 这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。

this.$refs获取不到dom的可能原因及方法解决

平时我们遇到this.$refs获取不到dom节点，最大的可能是我们在当前组件用上了ajax/axios等方法，因为他们都是异步的，在执行顺序上，先通过this.$refs来获取dom，再通过ajax请求加载dom，所以dom还没加载完，使用this.$refs获取不到数据