精华内容
下载资源
问答
  • vuekey 值的作用

    2020-10-09 10:02:50
    vuekey 值的作用 1.使用key来给每个节点做一个唯一标识 2. key的作用主要是为了高效更新虚拟DOM。另外vue中在使用相同标签名元素过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们, 否则vue...

    vue中 key 值的作用
    1.使用key来给每个节点做一个唯一标识
    2. key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,
    否则vue只会替换其内部属性而不会触发过渡效果。

    展开全文
  • 今天思考一个问题,在子组件中,key值的作用是什么?如果一个组件,改边key值,,发生什么?实践出真理,测试一下:首先,创建一个子组件://components/keyCom.vue{{ptext}}一个非常简单组件,在各个生命周期上...

    今天思考一个问题,在子组件中,key值的作用是什么?

    如果一个组件,改边key的值,,发生什么?

    实践出真理,测试一下:

    首先,创建一个子组件:

    //components/keyCom.vue

    {{ptext}}

    一个非常简单的组件,在各个生命周期上,绑定事件:

    export default {

    data(){

    return {

    ptext:"测试文本"

    }

    },

    beforeCreate(){

    console.log('enter beforeCreate')

    },

    created(){

    console.log('enter created')

    },

    beforeMount(){

    console.log('enter beforeMount')

    },

    mounted(){

    console.log('enter mounted')

    },

    beforeDestroy(){

    console.log('enter beforeDestroy')

    },

    destroyed(){

    console.log('enter destroyed')

    }

    }

    接下来,通过父组件修改子组件的key值:

    import KeyCom from '@/components/keyCom'

    export default {

    data(){

    return {

    key:1

    }

    },

    components:{

    KeyCom

    },

    methods:{

    changeKey:function(){

    this.key=2;

    }

    }

    }

    看看运行起来是什么情况:

    切换key值之前

    点击按钮之后,发现:

    修改了key值之后

    组件经历了一个全新的生命周期,这是为何?为什么同样一个组件,仅仅改变了它上面的key值,就会重新挂载一个新组件?

    之前了解到,key值的最大作用,是在渲染列表的时候,diff算法使用到,那么我们就来看看diff的过程是如何?

    分析vue的源码,可以知道,diff算法是从patch函数开始:

    patch:function(oldVnode,vnode){

    if(sameVnode(oldVnode,vnode)){

    patchVnode(oldVnode,vnode)

    } else {

    const oEl = oldVnode.el;

    let parentEle = api.parentNode(oEl);

    createEle(vnode);

    if(parent!==null){

    api.insertBefore(parentEle,vnode.el,api.nextSibling(oEl));

    api.removeChild(parentEle,oldVnode.el);

    oldVnode = null

    }

    }

    return vnode;

    },

    通过patch函数,可以看到,首先需要对比两个节点是否是相同节点,(相同的组件,难道不是相同节点吗?)

    进入sameVnode函数看看:

    sameVnode(a,b){

    return (

    a.key === b.key && // key值

    a.tag === b.tag && // 标签名

    a.isComment === b.isComment && //是否为注释节点

    //是否都定义了data,data包含一些具体信息,例如onclick

    isDef(a.data) === isDef(b,data) &&

    sameInputType(a,b) //当标签是input,type必须相同

    )

    }

    恍然大悟,原来在diff的时候,不仅是对比元素的标签名,还会去对比元素的key值,key值一旦改变,就算子节点的内容一模一样,也是会进入到patch函数的else中,那么这个时候,执行的操作就是新建新组件=>删除旧组件=>添加新组件。

    因此,可以看到生命周期是新组件的生命周期先执行,再进行旧组件的销毁,接着挂载新组件。

    emmmm...

    那么再思考深一层的问题,如果是列表渲染的时候,key值设为id,和index会有什么区别呢??

    同样的做一个测验:创建一个子组件,子组件里包含一个孙子组件

    {{text}}

    delete

    export default {

    name: "Child",

    props: ["text"],

    data() {

    return {

    x: "在这输入"

    };

    },

    methods: {

    onDelete() {

    this.$emit("delete");

    }

    }

    };

    接着,在原先的组件里:

    创建2个Child组件,它们的区别就是一个使用index作为key,一个使用id作为key:

    data(){

    return {

    ptext:"测试文本",

    array: ['111','222','333'],

    array2: [{id:1,value:'文本1'},{id:2,value:'文本2'},{id:3,value:'文本3'}]

    }

    }

    运行之后就可以看到它们的区别:

    image.png

    先看上面的三行,这个是使用index作为key值的组件,当修改其中222这行的input值,然后点击删除:

    改变第二行的input值

    删除第二项之后

    删除之后发现,这与我们的预知不符呀,因为 data 里的数组从 [1,2,3] 变成了 [1,3]。

    这个可以看到vue中数组遍历的规则:首先对比1和1,发现1没变,然后对比2和3,发现2变成了3,接着对比3和undefined,把3删掉。

    所以步骤是:2变成3=>删除3。

    那么在删除的时候,因为input的值是孙子组件,里面的值不受2变成3的影响,所以就地复用。

    再看下面这个列表,使用id作为key值。当我们修改了第二项的input值,然后删除第二项的时候,会把第二项完全删掉,符合我们的预期:

    修改第二项的input值

    删除第二项之后

    原本的数组是:

    array2: [

    {id:1,value:'文本1'},

    {id:2,value:'文本2'},

    {id:3,value:'文本3'}

    ]

    点击删除之后数组是:

    array2: [

    {id:1,value:'文本1'},

    {id:3,value:'文本3'}

    ]

    先对比id从[1,2,3]变成了[1,3],即第二项被删除了。

    因此:key值为何不能用index作为值?

    如果你用index作为key值的时候,在删除第二项时,index就从1,2,3变成1,2;而不是1,3。

    结论

    VUE是通过比对组件自身新旧vdom进行更新的。key的作用是辅助判断新旧vdom节点在逻辑上是不是同一个对象。

    因此可以确定,渲染列表时,key值需要一个唯一确定的id来赋值。

    展开全文
  • 1.vuekey值的作用 key值的作用是为了给每个组件有唯一一个识别身份,主要是为了vue精准追踪到每一个组件,高效更新虚拟DOM 2.什么是虚拟dom vdom可以看作是一个使用js模拟了DOM结构树形结构,这个树形...

    1.vue中key值的作用

    key值的作用是为了给每个组件有唯一的一个识别身份,主要是为了vue精准的追踪到每一个组件,高效的更新虚拟DOM

    2.什么是虚拟dom

    vdom可以看作是一个使用js模拟了DOM结构的树形结构,这个树形结构包含了整个DOM结构的信息

    3.为什么要使用虚拟DOM

    相比往常的通过JS或者JQuery操作dom是非常复杂的一个过程,每次操作dom都要遍历一遍自己的代码,而且也不知道能不能遍历到,并且dom只能一个一个按顺序更新,虚拟dom可以将所有的要操作的dom事先更新到虚拟dom上,再虚拟dom上更新完成后再拿到真是dom上去渲染,大大提高了代码效率和渲染效果。

    展开全文
  • vueKey值重复

    2020-03-19 15:40:46
    vueKey值重复 今天用jeecg-boot 做从页面传时间到modal表格中查询数据时报错,只要后台多表连接另一个时间表前端就报错,显示key值重复。 下面展示一些 报错信息。 Duplicate keys detected: ‘1’. This may ...

    vue中Key值重复

    今天用jeecg-boot 做从页面传时间到modal表格中查询数据时报错,只要后台多表连接另一个时间表前端就报错,显示key值重复。

    下面展示一些 报错信息

    Duplicate keys detected: ‘1’. This may cause an update error.

    网上百度后显示我 table表格的key重复了 , 在这里插入图片描述然后我改了 rowKey 给他加了唯一标识 rowKey=“id+‘s’” 后就不再重复了,但是在查询的时候又出来另一个错,没条数据都要有同样的Key值,于是我再初始加载的方法里加了下面展示一些 内联代码片

      created() {
         data.forEach((item, index) => {
            item.key = index + 1;
          })
        }
    

    但是这样就会显示data找不到 dataSource 在jeecgboot中是封装了的所以得把方法拿到页面上来。我试了许久无果后,就看了看数据库才发现数据库id 因为我查时间的原因很多重复,于是我做了按时间一个分组发现就不报错了。

    展开全文
  • 六、vuekey值的作用

    2020-04-14 10:24:19
    vuekey值的作用 (1)管理可复用元素 vue会复用已有元素而不是重新开始渲染。比如登录和注册框来回切换,但也存在问题,当切换时用户输入内容不会改变,因为两个模板使用一样元素,里面input标签不会被...
  • 很感谢有人帮我指出,可能是 Vue key ,导致数据渲染不正确。由此,我做了进一步尝试。 key 一个错误使用——使用 index 作为 key 不知道你在写 v-for 时候,会不会直接使用 index 作为它 key ,.....
  • v-for渲染列表结构采用“就地复用”策略,也就说当数据重新排列数据时,会复用已在页面渲染好元素,不会移动 DOM 元素来匹配数据项顺序,这种模式是高效,改变现有位置结构数据即可 eg: 问题:点击...
  • react 、vuekey值的作用

    千次阅读 2019-02-22 18:57:52
    key值的作用主要用来减少没必要diff算法对比,对于同一个组件或者节点来说,只要父节点状态或属性发生改变,该组件就会进行diff对比,即使该组件没有发生改变;如果为该组件引入key值,在进行diff对比前先做一次...
  • Vuekey值之坑

    2019-07-31 20:26:10
    Vue中在循环数据时 key值的设置大大简化了性能 ,然而坑依然无处不在请避免给key设置数据索引值 话不多说 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • 很感谢有人帮我指出,可能是Vue的key值,导致数据渲染不正确的。由此,我做了进一步的尝试。key 的一个错误使用——使用index作为key不知道你在写v-for的时候,会不会直接使用index作为它的key...
  • vue中关于v-for循环中key中出错解决方法: 报错原因是key值是唯一,重复使用,查看代码 v-bind:key=“todo.id” 所以在此处id值并不是唯一,所以需要把v-bind:key="index"就可以了。 ...
  • Vue在重新渲染页面时候,它会尽量尝试页面存在重复用dom 所以input里面值在切换用户名时候之前输入数据会存在 所以加 key值, 当你给一个元素加上key值得时候,相当于唯一元素,当重新加载就不会...
  • 相信大多数Vue开发者接触到key属性时候是使用v-for进行列表渲染时候,如果不使用key属性,Vue会产生警告,那么在这个时候key属性作用是什么呢? 官方文档中说: 当 Vue.js 用v-for正在更新已渲染过元素列表...
  • key 一个错误使用——使用 index 作为 key不知道你在写 v-for 时候,会不会直接使用 index 作为它 key ,是,我承认我会,不得不说,这真不是一个好习惯。以下是核心代码,其中 arrData 的值为 [1,2,3,4...
  • 数组v-foritem in itemsitem of itemsitem,index in items(item,index) in items对象v-for(键值,键名,索引)value in object(value, key) in object(value, key, index) in objectv-for渲染列表结构采用...
  • 主要介绍了基于vue--key值的特殊用处详解,具有很好参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue key值的 重复键 问题

    千次阅读 2018-11-28 10:17:45
    vue中,同一组件中兄弟元素之间使用for循环遍历数组,每一个for的key值不能使用下标来表示,不然这样会出现以下错误,也就是出现重复键的问题: [Vue warn]: Duplicate keys detected: '0'. This may cause an ...
  • vuekey值重复 Duplicate keys detected: ‘’.This may cause an update error. 为什么for循环后要加key值,否则会爆红,会产生什么影响? for循环读取key值时, key需要是唯一,如果key值重复会导致报错,...
  • 1.问题描述:在vue2.0+ 中做一个公用评论组件,:key使用时创建评论时间,当加载更多时候,会报错: Duplicate keys detected: '2019-01-24T07:15:35.000Z'.This may cause an update error. 2. 出...
  • 1 .index值不是一定不变,如果不加key值的话,删除前面项。后面index可能变也可能不变,比如加个定时器时候会变,不加定时器不会变2 .不加key话,更新机制进行diff时候是会全部比较,比如删除第一个...
  • vuekey的作用 更准确 因为带key就不是就地复用了,在sameNode函数 a.key === b.key对比中可以避免就地复用情况。所以会更准确。 更快 利用key的唯一性生成map对象来获取对应节点,比遍历方式更快。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,659
精华内容 663
关键字:

vue的key值

vue 订阅