Vue.js中不触发re-render的情况

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33603809/article/details/91419892

前段时间刚接了一个Vue.js的项目，开始入坑Vue.js
经过实践发现，Vue.js在某些情况下是不会触发re-render的，如下：

1、对数组来说：
a) 手动将数组长度置空

//  Vue模版中这么写
 data() {
 	return {
 		arr: [1, 2, 3, 4]
 	};
 }
// 在方法中
 this.arr.length = 0;

这是置空数组的一种方式，但是vue内部侦测不到数组发生改变(vue用的是Object.defineProperty进行数据拦截)，所以不会发生变化

b) 手动设置数组项

//  Vue模版中这么写
 data() {
 	return {
 		arr: [1, 2, 3, 4]
 	};
 }
   // 在方法中
 this.arr[0] = 10;

2、对对象来说，使用Object.assign也不会触发re-render

 //  Vue模版中这么写
 data() {
 	return {
 		obj: {a: 20, b: 30}
 	};
 }
 // 在方法中
 const data = {c: 40, d: 50};
 Object.assign(this.obj, data);  

Vue未来可能会使用Proxy来实现侦测，以上问题就能得到解决，当然，现在还是避免在Vue中这么写。