vue的坑和使用总结

1. 路由变化页面数据不刷新问题

 watch: {
 // 方法1
  '$route' (to, from) { //监听路由是否变化
    if(this.$route.params.articleId){// 判断条件1  判断传递值的变化
      //获取文章数据
    }
  }
  //方法2
  '$route'(to, from) {
    if (to.path == "/page") {    /// 判断条件2  监听路由名 监听你从什么路由跳转过来的
       this.message = this.$route.query.msg     
    }
  }
  
}

2.setInterval路由跳转继续运行并没有及时进行销毁

//组件销毁前执行的钩子函数 
beforeDestroy(){
 
    clearInterval(this._inertvalId);
},

3.vue 滚动行为用法,进入路由需要滚动到浏览器底部 头部等等

const router = new VueRouter({
   mode: 'history',
 scrollBehavior (to, from, savedPosition) {
     if (savedPosition) { //如果savedPosition存在，滚动条会自动跳到记录的值的地方
       return savedPosition
     } else {
       return { x: 0, y: 0 }//savedPosition也是一个记录x轴和y轴位置的对象
      }
     }，
   routes: [...]
 })

4. ref被用来给元素或子元素注册引用信息。引用信息会根据父组件的$refs对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素，如果用在子组件上，引用信息就是组件实例。

<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>
<!-- vm.$refs.child will be the child comp instance -->
<child-comp ref="child"></child-comp>

5. 给组件添加事件
   事实上给组件绑定原生事件就需要.native修饰v-on，否则无法注册成功。

<my-component v-on:click.native="doTheThing"></my-component>

6. 数据监测能力
   由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

 this.data[index] = res.data;
 this.data.length = 0;

应该这样：

  Vue.$set(this.data, 1, {name:"test",age:"22"})