总结vue中数据更新,但是界面没有更新的情况

1. 前言

1.学徒一茬一茬的,但是问题都差不多,是时候总结下了
2.主要是vue2
3.大部分问题官网都有答案,所以还是建议先熟悉下vue响应式原理
4.只精简出简要能体现错误原因的代码

---

2. 注意事项

1.官网的这句话非常重要
2.由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性

3. 修改数组界面不更新

典型的场景

1. 通过索引直接赋值 ,进行数组的修改
2. 通过长度来删除或者清空数组

3.1 修改 数组元素和长度

var vm = new Vue({
  data: {
    nums: [1,2,3,4,5,6]
  },
methods:{
  change(){
      this.nums[2]="yzs"  // 不是响应性的
     this.nums.length=0
   }
 }
})
vm.nums[1] = 'x' // 不是响应性的
vm.nums.length= 0 // 不是响应性的

---

3.2 解决方案 修改数组元素

1.第一种就是通过 vue 的set方法来修改
2.第二种就是通过可以修改原数组的 方法进行修改

Vue.set(vm.nums, indexOfItem, newValue)
vm.$set(vm.nums, indexOfItem, newValue)

vm.nums.splice(indexOfItem, 1, newValue)

---

3.3 解决方案 修改数组长度

vm.nums.splice(newLength)

---

4.数组总结

官网

1.png

---

5. 对象

1.png

---

5.1 代码

var vm = new Vue({
  data:{
    a:1,
   user:{name:"yzs"}
  },
methods:{
  change(){
      this.user.name="可以"  
     this.user.age=30 // 不是响应性的
   }
 }
})

// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的

---

5.2 解决方案

1.对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property
2.Vue.set(vm.someObject, 'b', 2)
3.this.$set(this.someObject,'b',2)

---

5.3 错误代码

尤其在表单操作常见

`Object.assign(this.someObject, { a: 1, b: 2 })`

---

5.4解决

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

---

6. 动态路由

6.1 场景

配置动态路由 比如"/home/:id"

---

6.2 解决

1.监听/watch $route的变化

 watch: {
   '$route': function() {
      this.newsId= this.$route.params.id
    }
 }

---

2. router-view 绑定key值
   key 用于diff算法 ,所以不同的key 切换会触发更新

---

后记

其实这都是从官网复制的,只是很多人习惯直接百度, google,而不是看官网,所以我就搬运下,希望大家平常还是多看看官网

---

参考资料

vue 深入响应原理

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉