1、数组非响应式
-
直接修改数组的长度 比如 this.list.lenght = 10;
-
利用索引直接设置数组的某一项 比如 this.list[2]= {aa:‘aa’}
通过以上两种方式修改,页面视图无法刷新。
原因猜测:
vue源码,通过Object.defineProperty()对对象属性的读和写分别使用get()和set()进行拦截,每当该属性进行读或写操作的时候就会触发get()和set(),使得一个对象转化成可观测对象。而数组通过将拦截挂载到数组实例与Array.prototype之间,这样通过数组原生方法操作数据,就能侦测到变化。 这里通过array.length = 0修改, 而不是通过数组原生方法修改,所以侦测不到。
解决方案:
1、通过数组原生方法splice,可以实现增删改查 。(如:splice、 push 、pop、shirt、unshirt…)
2、通过Vue内部Vue.set() 实现响应式。
2、 路由守卫无法获取到this实例
- 在beforeRouteEnter时,页面还没有渲染,无法获取this实例。
- 报错:
- 解决方案:
通过next回调来访问实例。确认导航后,将调用回调,并将组件实例作为参数传递给回调:
注意:beforeRouteEnter调用在mounted之前,next 回调在mounted之后