vue中修改了数据但视图无法更新的情况

2018-05-22 19:41:48

我遇到的两种情况:

  1. 在普通的循环中,写错了,属性值,然后就出现了这个问题。

  2. 还有在循环添加数据的时候,应该把要添加的数据放在定义了this.数据  的前面。


二:就是在store  vuex 中 格式化数据的时候,记住属性不能相应,做法部分代码如下。


: {
  : state => state.,
  : state => {
    (= ; < state..; ++) {
      Vue.(state.[], , )
    }
    state.},
},


数组更新检测

数组有一些方法可以导致视图更新

  1. push()

  2. pop()

  3. shift()

  4. unshift()

  5. splice()

  6. sort()

  7. reverse()

    替换数组: 例如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。可以用新数组替换旧数组,你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是,事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

注意事项

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

  1. 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

  2. 当你修改数组的长度时,例如:vm.items.length = newLength

var vm = new Vue({
  data: {    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的1234567

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:

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

你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:

vm.$set(vm.items, indexOfItem, newValue)1

为了解决第二类问题,你可以使用 splice:

vm.items.splice(newLength)1

对象更改检测注意事项

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

var vm = new Vue({  data: {    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2// `vm.b` 不是响应式的123456789

对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如,对于:

var vm = new Vue({  data: {    userProfile: {      name: 'Anika'
    }
  }
})1234567

你可以添加一个新的 age 属性到嵌套的 userProfile 对象:

Vue.set(vm.userProfile, 'age', 27)1

你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:

vm.$set(vm.userProfile, 'age', 27)1

有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或 _.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:

Object.assign(vm.userProfile, {  age: 27,
  favoriteColor: 'Vue Green'})1234

你应该这样做:

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'})



  • 2017-03-27 16:24:26

    laravel,gulp,Browsersync浏览器同步测试

    Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。

  • 2017-03-28 09:27:41

    Java中Arrays的asList()方法

    Java中Arrays的asList()方法 可以将 数组转为List 但是,这个数组类型必须是 引用类型的,如果是8中基本数据类型就不可以 原因如下,引用别人的一篇文章:

  • 2017-03-28 10:58:01

    No such property: sonatypeRepo for class:

    这种问题一般是出现在导入一些开源项目的时候。原因为该项目的原作者会把项目发布到maven中央仓库中,所以在gradle中添加了相关的maven发布任务,而发布任务需要配置

  • 2017-04-02 00:42:51

    PHP的pm、pm.max_requests、memory_limit参数优化说明

    pm是来控制php-fpm的工作进程数到底是一次性产生固定不变(static)还是在运行过程中随着需要动态变化(dynamic)。众所周知,工作进程数与服务器性能息息相关,太少则不能及时处理请求,太多则会占用内存过大而拖慢系统。

  • 2017-04-02 00:44:46

    NGINX + PHP-FPM 502 相关事

    NGINX + PHP-FPM 报 502 错误,我想大部分 SA 都遇到过吧。 根据报错的频率,可以分为两种情况,间歇性的502和连续性的502。 这里只讨论第一种情况——间歇性的502。