Vue的Key属性，v-for和v-if，v-if/v-show，v-pre不渲染，v-once只渲染一次

key属性
为什么要加

key -- api 解释

key的特殊属性主要用在vue的虚拟dom算法，如果不适用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用Key，它会基于Key的变化重新排列元素顺序，并且会移除Key不存在的元素。

v-for为什么要加Key

 

  
    添加





{{item.name}}

有key

  

    

      
      添加
    
    

      

         {{item.name}}
      
    

  

为什么使用v-for时必须添加唯一的key?

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
]

{{item.name}}

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
    {
        id: 4,
        name: '我是在最后添加的一条数据',
    },
]

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 4,
        name: '我是插队的那条数据',
    }
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
]

两个相同的组件产生类似的dom结构，不同的组件产生不同的dom结构。

同一层级的一组节点

特殊特性
key

预期：number | string

key的特殊属性主要用在vue的虚拟dom算法，在新旧nodes对比时辨识vnodes。

它可以用于强制替换元素，组件而不是重复使用它。

完整地触发组件的生命周期钩子
触发过渡

{{text}}

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

 hello 

v-for用于元素或组件的时候，引用信息将包含dom节点或组件实例的数组

is
用于动态组件且基于dom内模板的限制来工作

data: function () {
  return {
    todos: [
      {
        id: 1,
        text: '学习使用 v-for'
      },
      {
        id: 2,
        text: '学习使用 key'
      }
    ]
  }
}

  

    {{ todo.text }}
  

  

    {{ todo.text }}
  

永远不要把 v-if 和 v-for 同时用在同一个元素上。

为了过滤一个列表中的项目

v-for="user in users" v-if="user.isActive"

v-for="user in users"
v-if="shouldShowUsers"

 

 {{ user.name }}
 

this.users.map(function (user) {
 if (user.isActive) {
  return user.name
    }
})

computed: {
 activeUsers: function() {
  return this.user.filter(function (user) {
     return user.isActive
    })
}
}

 {{user.name}}
 
 

{{user.name}}

{{user.name}}





{{user.name}}

  

    {{ user.name }}
  


  

    {{ user.name }}
  

  

    {{ user.name }}
  


  

    {{ user.name }}
  

虚拟Dom以及Key属性的作用