Vue2.x 全家桶

前言

这里将介绍 Vue2.x 项目开发所需要的技术选型，以及相关基础知识的介绍

1.vue-cli

参考

vue-cli2.x，参考文档 (opens new window)

• 🏷️ 问题一：公司内网开发中使用vue-cli时会从外网地址拉取项目资源和依赖，但公司内网不能直接访问外网，导致创建失败

  公司内部搭建`npm`私有仓库，依赖从私有仓库拉取，脚手架可以设置将项目资源使用本地项目
  

2.Vue2.x

参考

Vue2.x：渐进式 js 框架，参考文档 (opens new window)

2.1 api

• 🏷️ 问题一：为什么修改 input 上双向数据绑定的值后，页面不能更新数据

  v-model 的数据初始化时没有在 data 里面，是后面直接赋值加入的
  

• 🏷️ 问题二：我需要遍历的数组值更新了,值也赋值了,为什么视图不更新

  那是因为有局限性啊,官方文档也说的很清楚,只有一些魔改的之后的方法提供跟原生一样的使用姿势(却又可以触发视图更新);
  一般我们更常用(除了魔改方法)的手段是使用:this.$set(obj,item,value);
  其他方式：
    方式一：数据使用深拷贝
    方式二：使用数据上相关方法更新数据（splice、pop、push）等
  

• 🏷️ 问题三：v-for 问题

  使用 index 作为 key 可能导致更新问题，尽量使用不变的 id，使用相同的key 会出现错误提示【Duplicate keys detected: ''. This may cause an update error.】
  

2.2 通信

• 🏷️ 问题一：props 数据是否是响应式数据，可以修改吗，可以向父组件传递数据吗

  是响应式数据，可以修改数据（如果是基本数据类型开发环境下会提示报错，复杂数据类型修改的是父组件传递的数据），通过父组件传递的函数传参可以向父组件传递数据
  

2.3 指令

2.4 生命周期

可能遇到的问题：

• 🏷️ 问题一：单个 Vue 组件中的生命周期是否是同步执行？

    情况 1（同步组件）：
      组件初始化：beforeCreate -> created -> beforeMount -> mounted 是同步执行
      组件更新：beforeUpdate -> update 是异步执行
      组件销毁：beforeDestroy -> destroyed 是同步执行
      其他：activated、deactivated、errorCaptured 是同步执行
  
    情况 2（异步组件）：
      组件初始化：beforeCreate -> created -> beforeMount -> mounted 是异步执行
      组件更新：beforeUpdate -> update 是异步执行
      组件销毁：beforeDestroy -> destroyed 当组件初始化完毕渲染 watcher 队列清空后是同步执行否则异步执行
      其他：activated、deactivated、errorCaptured 当组件初始化完毕渲染 watcher 队列清空后是同步执行否则异步执行
  

• 🏷️ 问题二：Vue 父子组件中的生命周期是否是同步执行？（父组件视角）

    情况 1（父同步组件 + 子同步组件）：
      组件初始化：beforeCreate（父）-> created（父）-> beforeMount（父）-> beforeCreate（子）-> created（子）-> beforeMount（子）-> mounted（子）-> mounted（父） 是父子同步执行
      组件更新：beforeUpdate（父）-> beforeUpdate（子）-> update（子）-> update（父） 是异步执行
      组件销毁：beforeDestroy（父）-> beforeDestroy（子）-> destroyed（子）-> destroyed（父） 是同步执行
      其他：activated、deactivated、errorCaptured 是同步执行
  
    情况 2（父同步组件 + 子异步组件）：
      组件初始化：beforeCreate（父） -> created（父） -> beforeMount（父） -> mounted（父） -> beforeCreate（子） -> created（子） -> beforeMount（子） -> mounted（子） 是父同步子异步执行
      组件更新：beforeUpdate（父）-> beforeUpdate（子）-> update（子）-> update（父） 是异步执行
      组件销毁：beforeDestroy（父）-> beforeDestroy（子）-> destroyed（子）-> destroyed（父） 当组件初始化完毕渲染 watcher 队列清空后是同步执行否则异步执行
      其他：activated、deactivated、errorCaptured 当组件初始化完毕渲染 watcher 队列清空后是同步执行否则异步执行
  
    情况 3（父异步组件 + 子异步组件）：同情况2
  
    情况 4（父异步组件 + 子同步组件）：同情况1
  

3.Vue-Router3.x

参考

vue-router3.x：vue 官方路由管理器，参考文档 (opens new window)

• 🏷️ 问题一：路由模式改为 history 后,除了首次启动首页没报错,刷新访问路由都报错!

  必须给对应的服务端配置查询的主页面,也可以认为是主路由入口的引导
  

4.Vuex3.x

参考

vuex3.x：vue 状态管理器，参考文档 (opens new window)

• 🏷️ 问题一：Vuex 中数据持久化处理，使用 localstorage 处理？

  使用相关插件保存数据
  

5.ElementUI

参考

element ui，饿了么推出的 UI 组件库，参考文档 (opens new window)

• 🏷️ 问题一：时间选择器

  1. 表单必填校验失效
    data 中初始化时将初始值设置为数字 0，在 elementui 内部识别为非空值，导致必填校验失效
  

• 🏷️ 问题二：分页组件

  1. 可以输入`e`和`.`
    输入框中可以输入科学记数法`10.1e2`
  

• 🏷️ 问题三：多个弹框默认层级有问题

  1. 可以全局调整层级
  

• 🏷️ 问题四：默认文案有需要修改，但文字镶嵌在组件内部动态变化

  1. 可以全局配置国际化字段
  

6.工具库

参考

axios，基于 promise 的网络请求库，参考文档 (opens new window)

Moment.js，JavaScript 日期处理类库，参考文档 (opens new window)

lodash，一个一致性、模块化、高性能的 JavaScript 实用工具库，参考文档 (opens new window)

vue-devtools，是专门调试 vue 项目的调试工具查看工具 (opens new window)

Vue performance Devtool，是专门检查 vue 组件性能的测试工具查看工具 (opens new window)

6.1 axios

• 🏷️ 问题一：xxx

  xxx
  

6.2 Moment.js

• 🏷️ 问题一：xxx

  xxx
  

6.3 lodash

• 🏷️ 问题一：lodash 项目中用处

  xxx
  

6.4 vue-devtools

• 🏷️ 问题一：xxx

  xxx
  

6.5 Vue performance Devtool

• 🏷️ 问题一：xxx

  xxx
  

7.css 预处理器

参考

SASS，世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言！，参考文档 (opens new window)

Less，是一门向后兼容的 CSS 扩展语言，参考文档 (opens new window)

Stylus，富于表现力、动态的、健壮的 CSS，参考文档 (opens new window)

可能遇到的问题：

• 🏷️ 问题一：在 less, sass, stylus 中，使用 @import "@/style/theme" 的语法引用目录确会报错

  解决办法是是在引用路径的字符串最前面添加上 ~
  

  • 代码：

    @import "~@/style/theme.less" //css module中
    background: url("~@/assets/xxx.jpg") // css 属性中
    <img src="~@/assets/xxx.jpg"> //html 标签中
    

6.代码规范

参考

eslint，可组装的 JavaScript 和 JSX 检查工具，参考文档 (opens new window)

prettier，可组装的 JavaScript 和 JSX 检查工具，参考文档 (opens new window)

vue2 风格指南，官方的 Vue 特有代码的风格指南，参考文档 (opens new window)

可能遇到的问题：

• 🏷️ 问题一：xxx

  xxx