精华内容
下载资源
问答
  • vue删除数组对象不能实时更新

    千次阅读 2019-09-17 15:30:44
    <iclass="el-icon-close" @click="deleteItem(index,ind)"></i> //删除选中的数据 deleteItem(index,ind){ console.log(index,ind) this.cList.data[in...

    <i class="el-icon-close"

                           @click="deleteItem(index, ind)"></i>

     

    // 删除选中的数据

        deleteItem (index, ind) {

          console.log(index, ind)

          this.cList.data[index].quData.splice(ind, 1)

          this.cList = Object.assign({}, this.cList)

          console.log(this.charpterList)

        },

    使用 Object.assign({}, this.cList)直接赋值的原理监听

    展开全文
  • 对数组和对象进行操作,没有被vue监听到没有实时更新,如何操作让vue监听动态变化一、什么操作会导致vue监听到1、对象的变化1、数组的变化总结 一、什么操作会导致vue监听到 1、对象的变化 受现代 JavaScript 的...

    对数组和对象进行操作,没有被vue监听到没有实时更新,如何操作让vue监听动态变化

    一、什么操作会导致vue监听不到

    1、对象的变化

    受现代 JavaScript 的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的

    使用Object.assign() 或 _.extend() 方法来添加属性

    Object.assign({},{name:''123'})
    

    1、数组的变化

    由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
    (1)、当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
    (2)、当你修改数组的长度时,例如: vm.items.length = newLength

    使用Vue.set 或 splice方法来添加属性

    this.$set
    
    arr.splice(0,1,'123') 
    // 第一个参数是删除元素的下标,
    //第二个参数是删除个数(可以为0),
    //第三个是插入的元素
    

    总结

    good morning
    展开全文
  • 一、在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并会自动更新到视图上去;向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。...

    一、在我们使用vue进行开发的过程中,可能会遇到一种情况:

    当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;

    向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 ,需要用vue内置的方法

    二、Vue.set() 响应式新增与修改数据

    此时我们需要知道Vue.set()需要哪些参数,官方API:https://cn.vuejs.org/v2/api/#Vue-set

    调用方法:Vue.set( target, key, value ) 或者 this.$set(target, key, value);

    target:要更改的数据源(可以是对象或者数组)

    key:要更改的具体数据

    value :重新赋的值,

    调用:this.$set(target, key, value);

    补充知识:vue Render scopedSlots

    render 中 slot 的一般默认使用方式如下: this.$slots.default 对用 template的的使用没有name 。 想使用多个slot 的话。需要对slot命名唯一。

    在render函数中动态使用多个slot,并且给slot传值

    一、我的业务逻辑:

    使用了三个组件,

    组件A调用组件B,组件B调用组件C,组件C是自己封装的render渲染组件。

    组件A希望将自己自定义的插槽插到C组件,C组件渲染出自定义的内容,并且将C组件的值传递给B组件和A组件,B组件是对C组件进行更大一层的封装

    A组件调用B组件

    slot="name"

    slot-scope="field"

    class="check-link"

    @click="rowLinkClick"

    >

    {{ field.field.rowData.name }}

    A组件引用B组件,slot-scope接收从B组件中传出来solt的值,slot=“name”,是为插槽具名;

    B组件中调用C组件的render函数

    v-for="(item, index) in fields"

    :key="index"

    slot="name"

    slot-scope="field"

    >

    B组件span中 slot是动态的值,和A组件中的slot同一个值,才能接受来自A组件自定义的插槽,

    field是来自于C组件中传递的值

    C组件是render函数

    h(

    "td",

    {

    style: { width: field.width + "px" },

    class: { borderRight },

    // 作用域插槽格式

    // { name: props => VNode | Array }

    scopedSlots: this.$scopedSlots.name,

    // 如果组件是其他组件的子组件,需为插槽指定名称

    slot: 'name'

    },

    this.$scopedSlots.name({

    field: field,

    rowData: rowData,

    })

    );

    C组件往上传递的值就是 {field:'', rowData: ''} 的对象

    以上这篇解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • vue 父子组件传值数据不能实时更新问题 解决方案一: 在子组件进行深度监听,然后监听里调用方法就可以了 父组件测试代码 <WranList ref="myEMChartRef2" :data-arr="dataArr" /> data() { return { ...

    vue 父子组件传值数据不能实时更新问题

    解决方案一: 在子组件进行深度监听,然后监听里调用方法就可以了

    父组件测试代码

    <WranList ref="myEMChartRef2" :data-arr="dataArr" />
    
    
    
    data() {
        return {
          dataArr: ['父组件初始的数据测试dataArr'],
        }
      },
    
    
    
    mounted() {
        let ii = 0
        setInterval(() => {
          ii++
          this.dataArr = ['定时器' + ii]
          console.log('父组件改变子组件值,改变后的值为', this.dataArr)
          this.$refs && this.$refs.myEMChartRef2 && this.$refs.myEMChartRef2.reFresh()
        }, 10000);
    }
    

    子组件测试代码

    props: {
        dataArr: {
          type: Array,
          required: true,
          default: () => {
            return []
          }
        }
      },
    
      data() {
        return {
          currentDataArr: this.dataArr
        }
      },
    
      watch: {
        dataArr(val) {
          console.log('子组件深度监听获取的val', val)
          this.currentDataArr = [...val]
          this.reFresh() // 打开这个就可以更新为最新数据了
        }
      },
    
    methods: {
        reFresh() {
          console.log('当前子组件方法里内数据', this.currentDataArr)
        }
    }
    

    打印结果

    
    父组件改变子组件值,改变后的值为 ["定时器2", __ob__: Observer]
    当前子组件方法里内数据 ["定时器1", __ob__: Observer]
    子组件深度监听获取的val ["定时器2", __ob__: Observer]
    
    父组件改变子组件值,改变后的值为 ["定时器3", __ob__: Observer]
    当前子组件方法里内数据 ["定时器2", __ob__: Observer]
    子组件深度监听获取的val ["定时器3", __ob__: Observer]
    
    父组件改变子组件值,改变后的值为 ["定时器4", __ob__: Observer]
    当前子组件方法里内数据 ["定时器3", __ob__: Observer]
    子组件深度监听获取的val ["定时器4", __ob__: Observer]
    
    父组件改变子组件值,改变后的值为 ["定时器5", __ob__: Observer]
    当前子组件方法里内数据 ["定时器4", __ob__: Observer]
    子组件深度监听获取的val ["定时器5", __ob__: Observer]
    

    解决方案二this.$nextTick

    let ii = 0
        setInterval(() => {
          ii++
          this.dataArr = ['定时器' + ii]
          console.log('父组件改变子组件值,改变后的值为', this.dataArr)
          this.$nextTick(()=>{this.$refs.myEMChartRef2.reFresh(ii)})
        }, 10000);
        this.changeTiming(200000);
    
    
    打印结果
    
    父组件改变子组件值,改变后的值为 ["定时器4", __ob__: Observer]
    子组件深度监听获取的val ["定时器4", __ob__: Observer]
    当前子组件方法里内数据 4 ["定时器4", __ob__: Observer]
    
    
    父组件改变子组件值,改变后的值为 ["定时器5", __ob__: Observer]
    子组件深度监听获取的val ["定时器5", __ob__: Observer]
    当前子组件方法里内数据 5 ["定时器5", __ob__: Observer]
    

    需要特别注意的是,如果父组件给子组件传值采用this.$nextTick方式更新,子组件只声明props就可以了,不用再进行重新声明,也不需要进行深度监听

    下面就是一个错误的案例

    父组件

    <WranList ref="myEMChartRef2" :data-arr="dataArr" />
    
    
    setFunTimeOut(componentName, fun = null) {
          let timeOutFun
          if (this.$refs && this.$refs[componentName]) {
            console.log('存在这个dom')
            if (fun) { fun() } else {
              console.log('存在这个dom---执行刷新函数')
              console.log('执行此函数时候的dataArr', this.dataArr)
              this.$refs[componentName].reFresh()
            }
          } else {
            window.clearTimeout(timeOutFun)
            timeOutFun = setTimeout(() => {
              if (fun) { fun() } else {
                console.log('不-----存在这个dom', this.$refs[componentName])
                this.$refs[componentName].reFresh()
              }
            }, 1000);
          }
        },
    
    
    // 父组件调用
    this.dataArr = res2.List
              console.log('this.dataArr父组件里的值', this.dataArr)
              this.$nextTick(
                () => { this.setFunTimeOut('myEMChartRef2') }
              )
    
    

    子组件

    
    props: {
        dataArr: {
          type: Array,
          required: true,
          default: () => {
            return []
          }
        }
      },
    
    
     data() {
        return {
          currentDataArr: this.dataArr
        }
      },
    
    
     methods: {
        reFresh() {
          console.log('当前子组件方法里内数据this.dataArr',  this.dataArr)
          console.log('当前子组件方法里内数据this.currentDataArr',  this.currentDataArr)
        }
    }
    
    
    

    打印结果

    this.dataArr父组件里的值 (1) ['最新新数据', __ob__: Observer]
    存在这个dom
    存在这个dom---执行刷新函数
    执行此函数时候的dataArr (1) ['最新新数据', __ob__: Observer]
    当前子组件方法里内数据this.dataArr (1) ['最新新数据', __ob__: Observer]
    当前子组件方法里内数据this.currentDataArr ["上一次的数据", __ob__: Observer]
    
    

    可以看出,子组件props里的数据是更新的,但是重新声明的那个是上一次的数据,假如我们要对子组件进行深度监听,比如加上下面的代码,就可以采用这种方式,但是父组件可以直接更改值,不使用this.$nextTick,但是毕竟耗费性能,所以。。。。。。你懂的

    子组件可以加上这个,但是不建议

    // watch: { // 暂时决定采用方案二,深度监听太耗费性能
      //   dataArr(val) {
      //     console.log('子组件深度监听获取的val', val)
      //     this.currentDataArr = [...val]
      //     // this.reFresh() // 假如说不用这行代码,子组件就不会更新数据
      //   }
      // }
    
    
    展开全文
  • 因为vue在渲染的时候对于数组对象里面的的变化是不能及时渲染到的(这是我个人浅薄的理解),受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以...
  • 受现代 JavaScript 的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue var vm = ...
  • 如下代码片段 // js obj = { a: 123, b: 223, c: 323 } ...<li v-for="item in obj...此时若在methods中使用 delete this.obj.a 或者 delete this.obj["a"]会发现视图中的li不会实时更新,这种情况是由于原生del...
  • 最近做项目多次出现这个问题,尝试多次解决了,浪费挺多时间,写出来给有这类问题的... 受现代 JavaScript 的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对
  • 1.钩子函数尽量使用mounted来完成初始化...这个问题发现于修改一处input绑定的对象属性,另外一处{{person.name}}不能及时更新,vue似乎只会对第一层(这里的m80)的数据进行实时更新,如果想让他对第二层(m80里的...
  • 简单分析了一下,原因大概是因为VUE的数据劫持并没有实现到监测对象中的子对象的改变,因此这时候我想,手动改变一下整个对象或许触发到VUE的数据劫持。 假设要刷新的对象是items。 this.items = JSON....
  • 其实是这样的,当你改变数组或者对象中的值的时候,因为他们都是引用类型,都指向的是地址,所以他们不算真正的改变了,因为引用地址都没有改变,那么vue就不会及时的渲染更新! 解决办法: $set(list, index, data)...
  • 补充知识:vue data中数组以及对象 属性改变时不能及时反馈到视图中问题的解决方式 1.vue 对数组更新检测 的机制又很明确的说明: 变异方法:Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。 这些...
  • 最近在项目中遇到个问题,数组已经更新了,但是页面中的...其中最重要的一句话就是 ---如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新,这个方法主要用于避开Vue不能检测到属性被添加的限制。...
  • 前言:其实使用vue的都知道,vue声明在data中的属性都是响应式的,也就是,我们在修改data中的属性时,一般页面都能实时更新。但是由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。比如我们对data中的对象...
  • vue中 $set的使用

    2019-02-25 14:14:20
    Vue 不能及时检测对象属性变化的解决办法 在Vue的使用过程中,可能会遇到一种情况: 当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 子组件的props数据不能与父组件传递的值实时保持一致...
  • vue双向绑定原理

    2021-03-19 09:03:19
    view的变化能实时让model发生变化,而model的变化也能实时更新到view。 vue采用数据劫持&发布-订阅模式的方式,通过es5提供Object.defineProperty()方法来劫持(监控)各属性的getter、setter,并在数据(对象...
  • vue的数组页面响应

    2020-04-28 16:57:45
    vue的数组和普通的JavaScript数组没有什么太大的区别,但是由于 JavaScript 的限制,Vue 不能检测数组和对象的变化,所以导致很多数组变化是没办法做到实时更新的,这些方法的了解可以帮助我们更好的使用vue,同时也...
  • vue基础知识梳理

    2020-08-21 23:25:50
    一、基本代码 和 MVVM 之间的对应关系 Model:模型层,这里表示JavaScript对象 ...View Model: 连接视图和数据的中间件,...View Model观察到数据的变化,并对视图对应的内容实时更新 View Model监听到视图的变化,
  • Vue双向绑定的详解

    2020-11-24 22:11:21
    View的变化能实时的让Model变化,而Model得变化也能实时更新到View 详解: Vue采用数据劫持&发布-订阅模式得方法,通过ES5提供得Object.defineProperty() 方法来劫持(监控)各属性得getter,setter,并在...
  • 扒一扒vue的数据追踪原理

    千次阅读 2016-07-19 20:12:31
    大家都知道在angular或vue中,数据的更新实时的反应到dom上,那么到底是什么原理呢,下面就vue探讨一下。打开vue的官网,可以看到它关于vue如何追踪变化的原理。 把一个普通对象传给 Vue 实例作为它的 data 选项...
  • View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。 Vue采用数据劫持&发布-订阅模式的方式,通过ES5提供的Object.defineProperty() 方法来劫持 (监控) 各属性的getter、setter,并在数据...
  • 在解析时, {{ name }} 将会被解析为对应的数据对象中 name 属性的值,如果数据对象中的 name 值发生了变化,由于 Vue 是双向数据绑定,所以标签中的内容也会实时更新。 {{ }} 语法只可以替换指定区域的文本内容,...
  • data:{  checkValue:{} } that.checkValue[key] = [] 赋值无法...原因:Vue 不能检测到对象属性的添加或删除 解决:改用vm.$set方法可以触发检测 转载于:https://www.cnblogs.com/xiaomingSun/p/7993932...
  • 不过对于数组中元素的修改,我们不能用 数组名[索引] = 值 这种形式来修改,虽然值改变了,但页面渲染不会生效,如果数组中是对像,我们修改对象的属性是可以的 数组名[索引].属性名 = 值 ,如果替换整个对象,也是...
  • 也同时看能不能佐证UI Render真的是在microtask队列清空后执行的。 研究之后的结论:我之前对于$nextTick源码的理解完全是错的,以及每轮事件循环执行完所有的microtask,是会执行UI Render的。 ...
  • js对象属性的getter和setter

    千次阅读 2017-01-03 17:02:01
    在看Vue的API时,里面提到修改Model层,会实时更新View视图,底层原理利用的是ES5的getter和setter方法,通过 Object.defineProperty 把属性全部转为 getter/setter。故温故一遍getter和setter定义属性的方法。 通过...
  • 因为下拉列表的数据是根据输入框的值的变化时行实时调用接口来更新而非不变的,频繁的更新,可能造成点击下拉列表中的某项后,select所绑定的value值无法进行及时的更新,尤其是所绑定的值是对象时(vue不能检测对象...

空空如也

空空如也

1 2 3
收藏数 41
精华内容 16
关键字:

vue对象不能实时更新

vue 订阅