v-model:双向数据绑定 用于表单元素   @ 代替

v-on：事件名="函数名"       :   代替

v-bind:属性名

v-if

v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；

v-if有更高的切换消耗，不适合做频繁的切换；

v-show

v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

v-show只是简单的基于css切换；

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；

v-show有更高的初始渲染消耗，适合做频繁的额切换；

vue项目的编写，涉及到组件之间数据的传递，由此产生一个问题：什么时候用vuex?

如果数据还有其他组件复用，建议放在vuex

如果需要跨多级组件传递数据，建议放在vuex

需要持久化的数据（如登录后用户的信息），建议放在vuex

跟当前业务组件强相关的数据,可以放在组件内

1.跨组件共享数据。

跨组件共享数据、跨页面共享数据

在开发Vue项目的时候，已经发现很多次。存在这种情况

封装了一个基础组件(即很多地方会用到),根据不用的业务派发不同的事件。但是发现，有时想派发事件都不行，因为父组件根本就没有引用。

没有引用父组件跟获取当前派发事件，并更新数据呢？

当然了，是用Vuex

1、当前是订单列表页，订单列表也点击取消订单，然后更新对应的订单列表

2、订单详情点击取消按钮，怎么更新对应的订单列表？

不要说每次进入订单列表页面都重新数据，那太浪费性能

这种情况也是用Vuex，state储存一个状态，监听这个状态，变化时更新对应的列表

1、从订单结算页，进入选择优惠券的页面

2、选择优惠券的页面如何保存选择的优惠券信息？

3、保存到本地？也行，但不建议保存到本地，如果有人使坏就很麻烦。当然了，肯定会有那么无聊的，你不要说肯定没有。不要问为什么我会知道

state保存优惠券信息，选择优惠券时，mutations提交，在订单结算页，获取选择的优惠券，并更新订单优惠信息

2.当一个组件需要派发多次事件。

如果它多次派发事件,必然有其它组件进行接收并调用。

如果是一个组件进行接收和调用还好,但是如果两个？三个？甚至四个呢？

如果派发事件的组件只是派发一个事件,那还比较好管理,一旦进行多次派发那么维护的难度会以乘法增加

购物车的数量需要用vuex。我想很多人有疑问,what?这么简单的东西都需要vuex,来管理？

容我介绍触发的场景

1、在首页、分类、商品详情页添加商品需要触发一次

2、在购物车进入编辑状态,删除购物车项,需要触发一次

3、在结算订单时,需要触发一次

在首页、分类、商品详情页、删除购物车项、结算订单总共就触发了6次

用vuex的mutations的触发,控制状态的就很清晰明了,并可以维护性很高

反之,如果每次都调用获取购物车数量的接口(前提得有),效果是实现了,但是每一次的HTTP请求,都是对浏览器性能消耗。

对比下来,用vuex的mutations进行触发,就显得更加有优势