Vue数据更新页面没有更新问题总结

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue数据更新页面没有更新问题总结

1. Vue无法检测实例别创建时不存在于data中的property

  • 原因: 由于Vue会在初始化实例时对property执行getter/setter转化,所以property必须在data对象上存在才能让vue转换为响应式

    // 问题
    var vm = new Vue({
        data: {},
        template: \'<div>{{item}}</div>\'
    })
    vm.item = \'hello world!!!\'
    // 解决
    var vm = new Vue({
        data: {
            item: \'\', // 声明
        },
        template: \'<div>{{item}}</div>\'
    })
    vm.item = \'hello world!!!\'

2. Vue无法检测对象property的添加或者删除

  • 原因: 这是由于ECMAJavaScript 5 的限制,vue.js不能检测到对象属性的添加或者删除.

    // 问题
    var vm = new Vue({
        data: {
            obj: {
                id: 1,
            },
        },
        template: \'<div>{{obj.item}}</div>\' // 没有变化
    })
    vm.obj.item = \'hello world!!!\'
    delete vm.obj.id 
    // 解决
    // 动态添加
    Vue.set(vm.obj, propertyName, newValue)
    Vue.$set(vm.obj, propertyName, newValue)
    // 动态添加多个
    this.obj = Object.assign({}, this.obj, {a: 1, b: 2})
    // 动态删除
    Vue.delete(vm.obj, propertyName)
    Vue.$delete(vm.obj, propertyName)

3. Vue不能检测通过数组索引直接修改一个数组项,也不能检测直接修改数组长度的变化

  • 原因: 官方,由于js的限制,Vue不能检测数组和对象的变化,尤雨溪-性能代价和获得用户体验不成正比

    // 问题
    var vm = new Vue({
        data: {
            items: [\'a\', \'b\', \'c\']
        }
    })
    vm.items[1] = \'x\' // 这不是响应性的
    vm.items.length = 4 // 不是响应的
    // 解决
    // Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    // vm.$set
    vm.$set(vm.items, indexOfItem, newValue)
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)
    // 解决长度
    vm.items.splice(newLength)

拓展：Object.defineProperty() 可以监测数组的变化

  • Object.defineProperty() 可以监测数组的变化。但对数组新增一个属性是不会监测到数据变化，因为无法监测到新增数组的下标，删除一个属性也是。

    var arr = [1, 2, 3, 4]
    arr.forEach(function(item, index) {
        Object.defineProperty(arr, index, {
        set: function(value) {
        console.log(\'触发 setter\')
        item = value
        },
        get: function() {
        console.log(\'触发 getter\')
        return item
        }
    })
    })
    arr[1] = \'123\'  // 触发 setter
    arr[1]          // 触发 getter 返回值为 "123"
    arr[5] = 5      // 不会触发 setter 和 getter

4. 在异步更新执行之前操作 DOM 数据不会变化

  • 原因: Vue在更新DOM时是异步执行,只要侦听到数据变化,Vue将开启一个队列.并缓冲在统一事件循环中发生的所有数据变更,如果同一个watcher被多次触发,只会别推入到队列中一次!这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的.然后在下一个事件循环nextTick中,Vue刷新队列并执行实际工作,Vue 在内部对异步队列尝试使用原生的 Promise.then``、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0)代替。

    <div id="box">{{item}}</div>
    var vm = new Vue({
        el: \'#box\',
        data: {
            item: \'abc\'
        },
    })
    vm.item = \'ABC\' // 数据改变
    vm.$el.textContent === \'ABC\' // 返回false
    vm.$el.style.color = \'red\' // 没有变化
    // 解决
    Vue.nextTick(function () {
        vm.$el.textContent === \'ABC\'
        vm.$el.style.color = \'red\' 
    })

5. 路由参数变化时,页面不更新,也就是数据不更新

  • 原因: 路由视图组件引用了相同组件时,当路由参会变化时,会导致该组件无法更新,也就是我们常说的页面无法更新的问题

    <div id="app">
        <ul>
            <li><router-link to="/home/a">To A</router-link></li>    
            <li><router-link to="/home/b">To B</router-link></li>    
            <li><router-link to="/home/c">To C</router-link></li>    
        </ul>    
        <router-view></router-view>
    </div>

    const Home = {
    template: `<div>{{item}}</div>`,
    data() {
        return {
        item: this.$route.params.name
        }
    }
    }
    const router = new VueRouter({
    mode:\'history\',
        routes: [
        {path: \'/home\', component: Home },
        {path: \'/home/:name\', component: Home }
    ]
    })
    new Vue({
    el: \'#app\',
    router
    })

  • 这段代码中,在路由构建选项router中配置了一个动态路由/home/:name,它们共用一个路由组件.当路由切换时,页面只会渲染第一次匹配到的参数,之后再进行路由切换,item是没有变化的

    // 解决
    // 通过watch监听$route的变化
    const Home = {
    template: `<div>{{item}}</div>`,
    data() {
        return {
        item: this.$route.params.name
        }
    },
    watch: {
        \'$route\': function() {
        this.item = this.$route.params.name
        }
        }
    }
    ...
    new Vue({
    el: \'#app\',
    router
    })

异步更新带来的数据响应的误解参考 - https://github.com/xiaofuzi/deep-in-vue/issues/11

以上是 Vue数据更新页面没有更新问题总结 的全部内容， 来源链接： utcz.com/z/375585.html

回到顶部