使用vue开发项目需要注意的问题和可能踩到的坑

最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下:

一.生命钩子使用需要注意的地方

1.beforeCreate 文档描述:在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 注意: 在这个钩子上，this变量还不能使用，data里的属性，methods方法里的方法，watcher中的事件都无法获得； 2.created 文档描述:在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 注意: 这个时候可以操作vue实例中的数据和方法, 但是由于还没有挂载, 还不能对dom节点进行操作. 3.mounted 文档描述:el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 注意: 挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行

二.重要选项的使用注意的地方

data data 用来存放实例的响应式属性 *组件的定义只接受function *data 应该只能是数据 - 不推荐观察拥有状态行为的对象。 *以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。

computed *依赖的必须是响应式属性变化才会重新计算。

methods,watch *不应该使用箭头函数来定义 method 函数,理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例

三.组件通信中需要注意

通过 Prop 向子组件传递数据 *props 的大小写,父组件中的template中属性使用kebab-case,在子组件的props接收时使用camelCase.vue会自动转换.(不在template中使用camelCase的原因是因为html对大小写不敏感) *props 只能实现父到子的单向下行绑定,防止从子组件意外改变父级组件的状态 *不应该在一个子组件内部改变 props

通过事件向父级组件发送消息 *和prop 不同，事件名不存在任何自动化的大小写转换,官方推荐始终使用 kebab-case 的事件名.

四.其他常见的问题

1.无法覆盖ui库样式
vue提供了组件作用域的css, 覆盖ui库的样式, 不能设置scoped属性 <style lang=“less” scoped></style>

2.生产环境代码去除.map文件 map文件用于定位到源码的位置,方便调试,但是文件会比较大,生产环境建议关掉 在文件Config/index.js中,设置productionSourceMap: false

3.是否使用vuex 官方: 由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 vuex.

4.组件的划分粒度 根据项目情况, 项目越大越复杂, 粒度越细

5.使用axios请求失败 get请求数据放在 params中, post,put等其他method时,请求数据放在data中, 两者可以一起使用

6.是否使用vuex 官方文档: 由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 vuex. 即: 大型项目,状态较复杂时才使用.在小型项目中,不建议使用,因为反倒会增加项目的复杂度.

7.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题

原因: 由上可以看出是资源打包路径有误，打包后的资源使用了绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路径无法被正确解析。

解决方法: 在打包时需要使用相对路径来处理静态资源 config/index.js, build对象 assetsPublicPath: '/' 改为 assetsPublicPath: './'

8.静态资源打包使用相对路径后css文件引入大图片路径错误问题。 原因: css是写在vue文件中的，css文件首先被less，postcss等处理，处理后会被ExtractTextPlugin处理，ExtractTextPlugin将js中的css全部抽离至app.css文件中,ExtractTextPlugin抽离css文件时没有转换资源引入路径.

解决方案: 1.修改webpack.prod.conf.js webpackConfig的extrat: false(不推荐) 2.build/util.js 设置: return ExtractTextPlugin.extract({ fallback: 'vue-style-loader', publicPath:"../../" }) 3.将静态资源放在static目录下(图片名称中无法增加md5字符串，不利于版本控制)