Vue使用问题记录(持续更新…)

文章目录

• • 1、watch监听，无法检测数组长度变化
  • 2、 路由守卫无法获取到this实例

1、watch监听，无法检测数组长度变化

 

• 父组件传递数据到子组件，3秒后更新父组件数据 this.data.length =2;

• 子组件监听数组
  
• 遇到问题：
      发现3秒后并没有执行watch方法。通过devTool调试，子组件arr数去长度确实发生了改变，长度为2。

• 原因猜测：
      vue源码，通过Object.defineProperty()对对象属性的读和写分别使用get()和set()进行拦截，每当该属性进行读或写操作的时候就会触发get()和set()，使得一个对象转化成可观测对象。而数组的length属性无法添加get和set，所以无法观测
   
  综上，可以通过直接修改数组的值完成监听，如下。
  

    所以，要监听数据，数组的初始化尽量使用arr = [], 避免使用arr.length=0。

 

2、 路由守卫无法获取到this实例

• 在beforeRouteEnter时，页面还没有渲染，无法获取this实例。

• 报错：

• 解决方案：
      通过next回调来访问实例。确认导航后，将调用回调，并将组件实例作为参数传递给回调：