1. 前言
1.学徒一茬一茬的,但是问题都差不多,是时候总结下了
2.主要是vue2
3.大部分问题官网都有答案,所以还是建议先熟悉下vue响应式原理
4.只精简出简要能体现错误原因的代码
2. 注意事项
1.官网的这句话非常重要
2.由于 JavaScript 的限制，Vue不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性
3. 修改数组界面不更新
典型的场景
- 通过索引直接赋值 ,进行数组的修改
- 通过长度来删除或者清空数组
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
}
}
- router-view 绑定
key值
key 用于diff算法 ,所以不同的key 切换会触发更新
<router-view :key="key"></router-view>
后记
其实这都是从官网复制的,只是很多人习惯直接百度, google,而不是看官网,所以我就搬运下,希望大家平常还是多看看官网
