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.数组总结

官网

5. 对象

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 切换会触发更新

<router-view :key="key"></router-view>

后记

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