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实例已经被销毁

原文地址：https://www.cnblogs.com/cassie-coder/p/8888428.html