精华内容
下载资源
问答
  • vue数组无法监听问题 watch 一、vue监听数组 vue实际上可以监听数组变化,比如 data () { return { watchArr: [], }; }, watchArr (newVal) { console.log(‘监听:’ + newVal); }, created () { setTimeout(() =&...

    vue数组无法监听问题 watch

    一、vue监听数组

    vue实际上可以监听数组变化,比如

    data () {
    return {
    watchArr: [],
    };
    },
    watchArr (newVal) {
    console.log(‘监听:’ + newVal);
    },
    created () {
    setTimeout(() => {
    this.watchArr = [1, 2, 3];
    }, 1000);
    },

    在比如使用splice(0,2,3)从数组下标0删除两个元素,并在下标0插入一个元素3

    data () {
    return {
    watchArr: [1, 2, 3],
    };
    },
    watchArr (newVal) {
    console.log(‘监听:’ + newVal);
    },
    created () {
    setTimeout(() => {
    this.watchArr.splice(0, 2, 3);
    }, 1000);
    },

    push数组也能够监听到

    二、vue无法监听数组变化的情况

    但是数组在下面两种情况下无法监听

    利用索引直接设置数组项时,例如arr[indexofitem]=newValue
    修改数组的长度时,例如arr.length=newLength
    举例无法监听数组变化的情况

    1、利用索引直接修改数组值

    data () {
    return {
    watchArr: [{
    name: ‘krry’,
    }],
    };
    },
    watchArr (newVal) {
    console.log(‘监听:’ + newVal);
    },
    created () {
    setTimeout(() => {
    this.watchArr[0].name = ‘xiaoyue’;
    }, 1000);
    },

    2、修改数组的长度

    长度大于原数组就将后续元素设置为undefined

    长度小于原数组就将多余元素截掉

    data () {
    return {
    watchArr: [{
    name: ‘krry’,
    }],
    };
    },
    watchArr (newVal) {
    console.log(‘监听:’ + newVal);
    },
    created () {
    setTimeout(() => {
    this.watchArr.length = 5;
    }, 1000);
    },

    展开全文
  • 详解VUE 数组更新

    2020-12-23 07:02:01
    1、数据方法分类:(1)原数组改变pushpopunshiftshiftreversesortsplice(2)原数组未变,生成新数组sliceconcatfilter对于使原数组变化的方法,可以直接更新视图。对于原数组未变的方法,可以使用新数组替换原来的数组...

    1、数据方法分类:

    (1)原数组改变

    push

    pop

    unshift

    shift

    reverse

    sort

    splice

    (2)原数组未变,生成新数组

    slice

    concat

    filter

    对于使原数组变化的方法,可以直接更新视图。

    对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化。

    示例代码:

    vue示例
    • 书名:{{book.name}}
    • 作者:{{book.author}}

    var app = new Vue({

    el: '#app',

    data: {

    books: [{

    name: 'vuejs',

    author: 'a'

    },

    {

    name: 'js高级',

    author: 'b'

    },

    {

    name: 'java',

    author: 'c'

    }

    ]

    }

    });

    //直接可以使得视图改变

    //app.books.push({name: 'c++',author: 'd'});

    //需要更新原数组

    app.books = app.books.concat([{name: 'c++',author: 'd'}]);

    注意:以下不会触发视图的更新。

    (1)通过索引直接设置项。

    (2)修改数组长度,app.books.length=1。

    若不想改变原数组,可以使用计算属性来过滤数组,如:

    vue示例
    • 书名:{{book.name}}
    • 作者:{{book.author}}

    var app = new Vue({

    el: '#app',

    data: {

    books: [{

    name: 'vuejs',

    author: 'a'

    },

    {

    name: 'js高级111',

    author: 'b'

    },

    {

    name: 'java33333',

    author: 'c'

    }

    ]

    },

    computed:{

    filterBooks:function(){

    return this.books.sort(function(a,b){

    return a.name.length>b.name.length?1:-1

    })

    }

    }

    });

    那么vue如何监听数据的变化呢?

    1)如何追踪变化

    每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

    2)变化检测问题

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

    var vm = new Vue({

    data:{

    a:1

    }

    })

    // `vm.a` 是响应的

    vm.b = 2

    // `vm.b` 是非响应的

    Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:

    Vue.set(vm.someObject, 'b', 2)

    还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名,👇是我们在项目中用过的一次,this.imgLen=3,目的使this.userImgsh=["审核成功","审核成功","审核成功"]

    var _this=this

    for (var i = 0; i

    if(_this.userImgsh[i] === '审核成功') continue;

    _this.$set(_this.userImgsh, i, '审核成功');

    }

    总结

    以上所述是小编给大家介绍的详解VUE 数组更新问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

    展开全文
  • Vue中对数组变化监听

    千次阅读 2021-04-03 17:56:40
    我们在实际开发中,经常要对数组进行操作,最为常见的方法就是直接对数组中的某个元素进行赋值,比如下面这样的: <script> export default { data() { return { comments: [], isReply: [0, 0, 0, 0, 0]...

    前言

    我们在实际开发中,经常要对数组进行操作,最为常见的方法就是直接对数组中的某个元素进行赋值,比如下面这样的:

    <script>
        export default {
            data() {
                return {
                    comments: [],
                    isReply: [0, 0, 0, 0, 0]
                };
            },
            methods: {
                replyTo: function (index) {
                    console.log(this.isReply);
                    isReply[index] = 1
                    console.log(this.isReply);
                }
            },
        };
    </script>
    

    但是虽然数组中的元素改变了,但是vue却不能监听到变化,同时我们引入watch来检测也是没有效果,如下所示

    <script>
        export default {
            data() {
                return {
                    comments: [],
                    isReply: [0, 0, 0, 0, 0]
                };
            },
          watch: {
            isReply: {
              handler(val, oldval) {
    
              },
              deep: true
            }
          },
            methods: {
                replyTo: function (index) {
                    console.log(this.isReply);
                    isReply[index] = 1
                    console.log(this.isReply);
                }
            },
        };
    </script>
    

    从上述例子,我们发现vue是不会响应数据变化而重新去渲染页面。在vue中仅需要通过修改赋值语句的方式,即可让vue响应数组数据的变化。具体操作如下:

    // Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)
    

    具体案例如下

    <script>
        import Comment from '../components/Comment'
    
        export default {
            data() {
                return {
                    comments: [],
                    isReply: [0, 0, 0, 0, 0]
                };
            },
            watch: {
    
            },
            components: {
                Comment
            },
            methods: {
                replyTo: function (index) {
                    
                    // 最后一个参数为我们需要改变的值
                    this.isReply.splice(index, 1, 1);
    
                    this.$set(this.isReply, index, 1);
    
                }
            },
        };
    </script>
    
    展开全文
  • 我使用的是数组的splice和push更改数组 , 一般使用watch监听也就使用新值就可以 , 刚好这次还需要用到旧值,正常的数组监听只能监听到新值的改变,新老值打印并不能打印出旧值的数(新值和旧值一样),如果需要获取...

    场景:
    我使用的是数组的splice和push更改数组 , 一般使用watch监听大部分只使用到新值 , 刚好这次还需要用到旧值,正常的数组监听只能监听到新值的改变,新老值打印并不能打印出旧值的数(新值和旧值一样),如果需要获取旧值,需要新建一个computed属性,使用JSON转换,然后再监听这个computed,就可以监听到新旧值的改变

    computed:{
     timeMark() {
          return JSON.parse(JSON.stringify(this.timeList));
        }
    },
    
    watch:{
    	timeMark: {
          handler(nv, ov) {
          //旧值的操作
            !isEmpty(ov) &&
              ov.forEach(item => {
                this.player.removeProgressMark(item.startTime);
              });
              //新值的操作
            nv.forEach(item => {
              const time = item.startTime;
              const duration = item.endTime - item.startTime;
              this.addMark(time, duration);
            });
          },
          deep: true
        }
    }
    
    展开全文
  • Vue如何监听数组的变化?

    千次阅读 2021-02-21 09:43:27
    使用函数劫持的方式,重写了数组的方法 Vue 将 data 中的数组,进行了原型链重写。指向了自己定义的数组原型方法,这样当调用数组 api 时,可以通知依赖更新.如果数组中包含着引用类型。会对数组中的引用类型再次...
  • vue数组监听

    2021-03-19 09:50:22
    在将数组处理成响应式数据后,如果使用数组原始方法改变数组时,数组值会发生变化,但是并不会触发数组的setter来通知所有依赖该数组的地方进行更新,为此,vue通过重写数组的某些方法来监听数组变化,重写后的方法...
  • vue 观察数组的变异方法 更新视图push()pop()shift()unshift()splice(i,n,arr)sort(xx)reverse()ex: app.book.push({name:'css',author:'lee'})有些方法不会改变数组filter()concat()slice()返回新数组 需要用 新...
  • 进行更改的方式不起作用,改变了data中的arr数组,但是未能正确渲染到页面中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=
  • 一、监听数组1.watch能监听数组的push的改变,例如data () {return {demo: [1,2]}},mounted(){window.myVue =this},watch: {demo(val){console.log(val)}},myVue.demo.push(3) //[1,2,3]2.watch不能检测以下变动的...
  • 原因:对象下的属性是数组,watch不了 解决方法:直接监听对象 watch: { formData: { handler(w) { let v = w.materialListOrigin; let r = v.reduce((sum, item) => { sum += item.needWeight * item.unitPrice; ...
  • 1、由于javascript的限制,某些情况vue监听不到数组的变化,例如:items[index] = newitem 2、或者是数组结构过于复杂和深度过深,也可能导致更新出现问题。 解决方案 1、当使用items[index] = newitem这类写法,...
  • 1. 不能监听的情况 (1) 直接通过下标赋值 arr[i] = value (2) 直接修改数组长度 arr.length = newLen 2. 替代做法 (1)修改值 1. Vue.set(arr, index, newvalue) 2. vm.$set(arr, index, newvalue) 3. ...
  • vue3中使用watch的时候需要注意的事项很多, 其中需要一项需要注意的是在监听数组的时候 假设在setup里面有这样的结构 const test = reactive({ arr: [1,2,3,4,5] }) watch(test.arr,(now,old)=>{ ...
  • vue-watch监听对象数组的变化

    千次阅读 2021-03-01 09:22:54
    1.对数组嵌套对象进行监听的时候,这时就需要深度监听 listData: { handler (val) { console.log(val); this.paginationChange(); }, // 这里是关键,代表递归监听 demo 的变化 deep: true }, 2.监听对象 ...
  • 关于Vue不能监听(watch)数组变化

    千次阅读 2020-12-24 10:16:28
    一、vue监听数组vue实际上可以监听数组变化,比方data () {return {watchArr: [],};},watchArr (newVal) {console.log('监听:' + newVal);},created () {setTimeout(() => {this.watchArr = [1, 2, 3];}, 1000);...
  • 我们知道通过Object.defineProperty()劫持数组为...但实际用vue开发时,对于响应式数组,使用push、splice、pop等方法改变数组时,页面会及时体现这种变化,那么vue中是如何实现的呢? 答案是 vue 重写了数组的push、s
  • vue 数组对象_侦听

    2021-07-16 18:26:15
    调了蓝色框的方法都会引起原本数组的改变,则vue会监视到,但filter过滤不会改变数组,而生成一个新数组 实现了对应的响应式 所以之前的那个数组直接修改的则可以解决 这边方法调的是原型上面的push vue...
  • vue逻辑处理中,直接给数组变量赋值为空例如 this.arr=[],后面操作将不会在监听此变量的变化 可以使用this.arr.splice(0)给清空数组
  • 最近用vue做一个小东西,发现了一个奇怪的现象,当模板使用数组进行v-if判断时,如果修改数组的值,页面渲染会明显有延迟,示例代码如下:这个更多显示反应有延迟{{v.name}}export default {data() {return {list:[{...
  • vue 深层数组更新

    2021-02-25 15:53:29
    问题:切换了ID 但ID还是之前的,导致找不到ID报undefined 这样视图数据不更新 但是放到定时器执行的话就更新 ...这里对象属性数都一样 只有内部值不一样,但调用数组更新方法也不更新 迷 后面更进 ...
  • vue监听对象、对象数组的改变

    千次阅读 2020-12-19 03:24:17
    vue监听对象的改变一、对象监听1. 深度监听changeexportdefault{name:'test',data () {return{user: { id:1, name: '李四', age: 14, sex: '男'}}},watch: {user: {handler:function(val) {console.log(val)},deep...
  • Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括: push() pop() shift() unshift() splice() sort() reverse()
  • 重新定义数组原型 创建新对象,原型指向oldArrPrototype const oldArrPrototype=Array.prototype; const ArrProto=Object.create(oldArrPrototype); ['push','pop','shift','unshift'].forEach(methodName=>{ ...
  • 下面通过一段代码给大家介绍vue watch的普通监听和深度监听,具体代码如下所示:var vm=new Vue({data:{num:1,obj:{name:'三儿',age:'21',sex:'女'}},watch:{num(val, oldVal){//普通的watch监听console.log(“num: ...
  • vue 中如何更新数组某一项,这是开发中经常遇到的问题例如:data 里面有个 list 数组数组里面有三项如何将第二项的值更新为 'jerry'不少小伙伴可能都试过 this.list[1] = 'jerry' ,但遗憾的是页面并不会更新这种...
  • 我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后,调用的数组的push、splice、pop等方法改变数组元素时并不会触发数组的...但实际用vue开发时,对于响应式数组,使用push、splice、pop等...
  • vue2中可以监听数组变化 直接给数组赋值 通过响应式数组方法改变数组 响应式数组方法 : push(),pop(),shift(),unshift(),splice(),sort(),reverse() 非响应式数组方法 : slice(),filter(),concat() vue2中无法...
  • 文章目录前言-Vue中改变了数据页面却不刷新原因总结 ...但是这两种方式都是无法触发Vue中的响应,在Vue的官方文档中也有解释,并且推荐了解决方案为:使用set方法或splice方法。 原因 因为vue实现双

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,723
精华内容 13,889
关键字:

vue数组更新监听方式

vue 订阅