Vue实战项目总结

2020-08-13

报错

下面的意思是在 ./src/icons/index.js 中找不到 SvgIcon

1
2
3

This dependency was not found:

* @/components/content/icons/SvgIcon in ./src/icons/index.js

dependcy 版本问题
图片加载问题：监听 load 事件
DOM加载问题：在合适的声明周期函数中获取 dom
webpack 配置问题
- 简单配置
- 链式调用

声明周期函数

DOM 声明周期函数的选择，什么时候 DOM 已经生成，什么时候DOM 渲染完毕了。

$nextTick：DOM 更新循环之后执行，但是图片这些资源可能还没有加载
created：请求数据，获取数据。
mounted：组件挂载时，获取 DOM 对象，ref
update：数据更改时，但是 dom 不一定全部被重绘
watch：监听 data 数据的改变,当需要在数据变化时执行异步或开销较大的操作时
fliters：对数据进行过滤，或处理
actived：和路由跳转有关，路由跳转，对象被创建
deactived：和路由跳转有关，路由离开，对象被销毁

数据的处理

数据的处理（参考选项卡控件的数据请求 && 详情页数据请求）

分类：接口数据杂乱时候，分析数据的数据结构，重构数据
对无效数据的处理：无效数据转化为 "",在组件的根元素判断之后再渲染 DOM
利用计算属性对数据二次处理

组件问题

什么时候一个组件需要抽离出子组件，增加组件的复用性：
- 功能非常明确的单一
  - 购物车的 selectButton 功能就只是选中和不选中，和父组件的关系的单一，最主要是页面其他部分需要用到。
  - navBar,tabBar，tabControl，backTop
- 对于列表 list 这种组件。一般会封装为 list 和 listItem 两个组件
  - 购物车界面的 carList 为什么还要封装一个 carListItem。carListItem 里面数据比较多，还有一些监听事件
  - 首页、详情页的推荐列表goodList 为什么还要封装一个 goodListItem。因为在goodList 里面的 goodListItem 利用flex 布局是2列布局，可能在其他地方是 3 两列布局。在 goodList 中 goodListItem 布局不同页面不一致，而且 goodListItem 数据也比较多
  - 我的界面服务类别的 listView 为什么没有封装一个 listViewItem。*因为 item 中只有图片和文字，数据太少。复用的地方直接用 listView 组件就可以 *
  - 一个tabbar 划分了 MainTabBar（和项目相关，path，图片资源）、TabBar（一个导航tabbar）、TabBarItem （一个按钮对象）
组件之间联系
- props
- emit事件
- 事件总线
- vuex
- ref : $refs获取的是组件对象，组件对象可以调用 option，$refs.$el组件对象下面的根DOM
- 将组件以插件的方式在全局注册
  - vue.prototype
  - install 方法
组件修饰符
- native
- stop
复用组件注意事项
- 接口，封装好接口，比如 scroll 组件
- 组件中获取的数据结构不一致时，比如 goodlist 被 3 个父组件 import，但是他们 img 的 src 都不一致。在计算属性中解决这个问题
插槽 slot

如果组件仅仅是文字不一样，不需要使用插槽，每个部分样式不一样考虑用插槽。

vuex

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

原理

store 仓库，类似容器，包含着应用中的大部分状态
- store.state 来获取状态对象
- store.commit 方法触发状态变更
- Vue 组件中访问 this.$store：vue实例以 store 选项的方式“注入”该 store 的机制（每个组价不需要单独导入 store 对象）
state 对象：单一状态树，包含了全部的应用层级状态，唯一数据源
- Vuex 的状态存储是响应式的
- 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
- 从 store 实例中读取 state （状态）
  - 组件中使用计算属性返回store 中的状态
  - mapState 辅助函数
- mapState 辅助函数
  - mapState 辅助函数帮助我们生成计算属性
  - 对象展开运算符让mapState 和组件局部 computed 混合
Getter :类似计算属性。从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。
- 第一个参数：state
- 第二个参数：可以是其他 getter
- Getter 会暴露为 store.getters 对象
- mapGetters 辅助函数
  - mapGetters 辅助函数将 store 中的 getter 映射到局部计算属性
Mutation ：类似事件。更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
- 每个 mutation 都有一个字符串的 事件类型 (type) 和一个 回调函数 (handler)
- 在这个回调函数内部进行状态的更改
  - 第一个参数：sate
  - 当触发一个类型为 increment 的 mutation 时，调用此函数
  - 要触发一个回到函数，需要以相应的 type 调用 store.commit 方法
- 提交载荷（Payload）： store.commit 传入额外的参数
- Mutation 必须是同步函数
  - 每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照
  - 异步将导致程序很难调试
Action ：Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作
- 分发 Action
  - Action 通过 store.dispatch 方法触发：
- 提交 mutation 记录 action 导致的状态改变
- store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：
Module ：将 store 分割成模块（module）
- 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
- 模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象
- 模块内部通过context.rootState暴露出根节点状态

编写

辅助函数的使用 MapGetters，MapActions
不同功能进行封装：
异步操作：actions，添加购物车
vuex 做了某些操作，想让外面知道，方法内部返回 promise 传递信息

vuerouter

params 和 query
路由懒加载
默认路由配置：redirect
<router-view>占
router 和 route
- router 是 VueRouter对象，在man.js 中导入的 router ，一般用于路由的跳转
- route 是配置路由，一组路由就是一个 route 对象，对象内有如下属性

keep-alive 和 exclude

事件高级

混入 mixin
事件中心，bus

模板字符串中传入变量 —— css语法

setTransform(position) {
  // ${} 在模板字符串中添加变量
  this.swiperStyle.transform = `translate3d(${position}px, 0, 0)`;
  this.swiperStyle['-webkit-transform'] = `translate3d(${position}px), 0, 0`;
  this.swiperStyle['-ms-transform'] = `translate3d(${position}px), 0, 0`;
},

模板语法

使用 JavaScript 表达式：

1	{{ ok ? 'YES' : 'NO' }}

条件渲染

v-if ：1）整个组件的渲染，如果数据为空，就不渲染组件；2）v-if ，v-else 选择渲染
v-show：会切换显示和隐藏的模块，backtop按钮

编码习惯

import 对象和 components 注册需要分类：公用组件、插件、视图的子组件、方法
声明周期函数内部代码要少，尽量只是调用方法。比如 created 里面请求数据的方法很长，可以将这些逻辑代码封装成一个 method，只是在created 调用这个方法。
数据杂乱的时候可以抽离成一个对象，可以参考 Detail 的商品信息模块
组件划分越细越好
多用 dev-tool 查看数据是否获取成功
空间换时间：参考详情页获取每个 navbar 的 title 区域

created() {
  this.getHomeMultidata()
},
methods: {
  /**
   * 网络请求相关的方法
   */
 getHomeMultidata() {  
  }

大大的总结

bs 原理插件原理

为什么原生的滚动卡顿
- 移动端手指触摸屏幕过于频繁，移动端会出现卡顿的现象
- 这个项目需要连动组件的实现
better-scroll

-webkit-transform: translateZ(0px);
熟悉浏览器渲染过程的小伙伴都知道。
页面绘制的过程分为三个部分：layout、paint和合成。layout负责计算DOM元素的布局关系，paint负责将DOM元素绘制成位图，合成则负责将位图发送给GPU绘制到屏幕上。
当某个DOM元素开启硬件加速之后，浏览器会为此元素单独创建一个“层”。当有单独的层之后，此元素的repaint操作将只需要更新自己，不用影响到别人。
哪些会CSS属性会创建新的层呢？

滚动回弹效果

vuex 流程 dispatch commit

传递异步数据同步数据流程
从因到果。

店家添加购物车（异步）
点击添加购物车按钮，触发监听事件addtocart。在这事件内部，首先将购物者界面需要的商品商品保存在一个 product 对象里。
然后，因为添加购物车属于一种异步事件，这里分发action，dipatch一个 action ，这个action的处理函数，会判断商品是第一次添加，还是已经添加过了
如果第一次添加，这个处理函数会提交到一个 type 为 addcart 的mutation，这个的moutation内的回到函数就会更新购物车状态，增加一个商品信息
如果不是第一次添加，这个处理函数会 commit 到一个 type 是 addCount 的 mutation，这个的moutation内的回到函数是将当前商品数量 + 1
在 action 处理函数的内部，返回一个 promise 函数，根据商品不同转台返回不同的resolve ，在最开始的监听购物车点击事件里面，store.dispatch 返回这个 promise 对象，之后可以在then里面进行处理resolve
$emit