zoukankan      html  css  js  c++  java
  • vue 关于数组和对象的更新

    在日常开发中,我们用的最多的就是 绑定数据
    
    <div v-for="item in data" :key="item.id">
     <!-- 内容 -->
    </div>
    
    

    如果你有ng的开发经验,假设 data 你要更新数据了

    
    this.data=res.data;
    
    

    但是这在vue中 并不会起到作用,DOM并没有触发变化。

    vue不是已经实现的实时数据双向绑定,那么model层发生了变化之后,为什么view层没有更新呢???

    看官网 这里才发现 深入响应式原理 列表渲染

    vue 关于数组和对象的更新
    数组检测更细变异的方法

    
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
    
    

    注意事项

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

    1. this.data[index] = res.data;
    2. this.data.length = 0;

    正确的操作方式

    1. Vue.$set(this.data, 1, {name:"huangenai",age:"22"})
    2. vm.items.splice(0)

    对象

    还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:

    
    <script> 
    export default {
     data(){
     return {
     userProfile: {
     name: 'Anika'
     }
     user: {
     name: "huangenai",
     age: 12
     }
     }
     },
     mounted() {
     this.$set(this.userProfile, 'age', 27)
     this.user = Object.assign({}, this.user, {
     age: 22,
     name: "huangenai"
     });
     }
     }
    </script>
    
    

    Vue提供了如下的数组的变异方法,可以触发视图更新

    
    push()
    pop()
    shift()
    unshift()
    splice() 
    sort()
    reverse()
    

    原文地址:https://segmentfault.com/a/1190000016776227

  • 相关阅读:
    python,selenium遇到的问题
    python环境配置
    性能测试函数
    性能测试的关注点
    环境配置
    性能监控工具使用
    linux路径
    linux权限
    自动化测试工具
    书籍
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9901006.html
Copyright © 2011-2022 走看看