Vue上手总结

公司最近搞vue迁移，迁移了一个模块，大概10天多点。基本了解了vue使用，vuex使用流程。 一开始写 不太熟练，走了很多弯路，以后越写越顺。整体来讲vue仍是三大框架中最简单的（Vue，React，Angular），并且在国内Vue十分火爆。

Vue

1.Vue生命周期

生命周期挺重要，不一样生命周期时，this所含有的属性是不同的，大体顺序就是：

beforeCreate （无data 无methods）
|（加载定义的data）
|（初始化定义的事件methods）
created
| （判断组件是否挂载）
beforeMount （挂载以前 这时候模板什么的都还未渲染template，进入页面的ajax放在这）
|（渲染模板）
mount（挂在完成 模板完成首次渲染）
|（触发页面destroy）
beforeDestroy （）
| （卸载组件，watcher，子组件，事件等）
destroyed（组件销毁完毕）

在个人平常开发中，常常用到的就是beforeMount这个hook。常常会遇到一个场景，详情页进入的时候，去ajax获取数据拿到以后，再渲染页面。在React中ajax是写在componentWillmount函数中。
Vue跟React差很少，都是在组件挂载以前执行ajax。

其余的函数暂时还没用到，不过根据经验，一些自定义的事件监听，好比自定义订阅者模式，要在beforeDestroy这里取消订阅。这里还有data更改的时候，触发从新渲染的两个生命周期函数没写，了解下就好。

2.模板

vue学习了Angular的自带模板
相对于React须要js输出DOM，vue的模板对于不少从Angular，或者jquery转过来的人比较容易上手。可是Vue也能够像React同样Render模板，暂时没有复杂场景用到。
但是我还以为React输出DOM的方式比较灵活可控。

vue官方文档中介绍的内容就不说了，说些本身的遭遇。
变量使用：vue模板默认指向对于的组件，因此 this.data，在模板中直接写data就能够，$store $router都是一个意思。

• 动态传值：当向一个组件或html传递一个可变的值时，须要使用 v-bind:xxx=""，v-bind:xxx=""简写成:xxx=""引号内的属于JS编译范围，再也不是纯字符串。

• 计算属性：这个是个不错的东西，computed属性跟data是平级的，是属性不是方法。定义的一个方法 输出一个值，当依赖的数据不变的时候，该方法就不被执行。

• v-bind:class：vue绑定class相对于React简单了不少，吸收了classnames插件的特色，一个固定class和动态class写成v-bind:class="['application', {'show': item.jobApplicationId}]"

• 条件渲染：确实很方便。

• 列表渲染：也很方便。

• 绑定事件：当向一个组件或html传递一个可变的值时，使用v-on:click="do"写法 简写成@click="do" 若是do函数须要传值 写成@click="do(1,2)"便可。另外vue的事件修饰符很方便，多用用。vue组件中的事件都是vue封装过得事件，有一些彩蛋属性，能够多了解。
  自定义组件：这里仍是强调单项数据流，子组件不可更改props，否则会报错。

3.响应式原理

常常会用到一个场景，data中定义了一个 obj = {a: 1, b: 2};a b 两个属性均是响应的。一旦更改，全部引用的地方都会跟着改变。可是某处使用 obj.c = 3 这时候c就不是相应的。原理文档中说的很清楚。解决办法就是 this.$set(this, 'obj', 3)这样给obj添加一个响应式属性

Vuex

1.使用场景

对于数据量很大的常见或者数据复、杂交互复杂，多个组件须要共享一些数据的时候，vuex仍是须要的。
可是一些简单的业务，使用vuex就复杂了。

2.操做顺序

1. 首先vuex须要存储数据的时候，须要在vuex中的state中定义该属性。当须要vuex中的数据的时候，要有对应的getter，而后组件mapGetters对应getter。

2. 更改数据的时候，在action中发ajax。处理数据后，commit到mutations中，getter会自动更新数据。

这里要说下我踩过的坑：
vue组件是能够调用三层中的任何一层
this.$store.dispatch()
this.$store.commit()
this.$store.getters()
没必要彻底按照顺序调用。

action层：每一个action方法，都应该返回一个Promise对象，这个Promise业务层能够直接拿到。 因此业务的ajax应该放到action层中，回调函数放在业务层。这样业务跟数据分离。

三 组件库

element UI

原本想写点router的，发现跟react-router同样，都是常规的前端路由没什么可写的。
咱们选用了饿了么的组件库，业务内大量使用。他们的组件基本覆盖了平常用到全部组件，基本能知足大多业务需求。可是他们的组件仍是有一些bug注意点为好。并且github上好多issue，由于格式不对就被关掉了 黑人问号 ？？？
可是整体上仍是能够知足业务的，交互还好。
差点忘了表单验证太难用了，还有bug！我都是本身写的。

四 总结

总的来讲，vue相对于React比较简单了，开发效率也高了起来。仍是写的多了，了解的就多了。另外国内vue比较火爆，国外仍然是react比较多。多保持些技术栈多些见识。