vue+mintUI+swiper杂感记录

1.ES6中箭头函数和function函数的区别

（1）普通函数，this普通情况下指向调用这个函数的对象

（2）箭头函数，this指向函数所处的对象，及继承父级的this

善用两种函数，可以比较合理的管理this，比如在vue中

methods:{
　　getVuale(){console.log(this}//这里的方法使用普通函数而不是箭头函数，在vue内无论哪儿使用this.getValue调用的时候，里面的this永远指向组件实例
},
例外一种情况是我在使用swiper的时候遇到的

swiperOption: {
    slidesPerView:6,
    on:{
      click:() =>{

//这里使用普通函数的话，调用这个click方法的是swiper，所以this指向swiper，我们就无法获取到vue实例的属性
 //使用箭头函数的话，this继承父级的this，即vue实例

   　   this.navIndex = this.swiper.clickedIndex;
        this.$emit('changeTab',this.navIndex);
    }
  }
}

2.vue中生命周期函数

清楚的知道vue的生命周期，才能理解vue的工作，避免因为先后顺序出错。

了解vue的8个生命周期钩子，就能了解整个过程的数据加载和DOM渲染。

　　//vm.$create()执行会先执行beforeCreated，然后执行created

　　//vm.$mount()，vm.$update(), vm.destory() 类似。我们可以在创建vue时生命周期使用钩子函数，以达到在不同时期执行相应操作。

（1）beforeCreated ------------- 创建前，此时包括data，computed，props等都还没创建，如果在这个时期调用这些会 not defined

>  created -------------  创建完成，此时data已经绑定了，但是DOM还未生成，取不到DOM

>  beforeMounted -------  挂载之前，完成了el初始化，使用虚拟DOM技术将位置占领，还没在界面生成html
>  mounted--------------  挂载结束，vue已经将data绑定到DOM中，属性使用初始化的值，未更新
>  beforeUpdate---------  更新前，当数据发生改变前的钩子，此时data已经改变，但是dom内相应内容没变
>  updated--------------  更新渲染已经完成之后的钩子，此时都没内也已经更新完成了
>  beforeDestoryed------  vue实例还没被销毁
>  destoryed -----------  vue实例已经被销毁

vue+mintUI+swiper杂感记录

猜你喜欢