使用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字符串,不利于版本控制)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Core Net

Visual Studio 2017 for Mac 快捷键

3274
来自专栏挖坑填坑

angular页面打印局部功能实现方法思考

在页面显示的时候是分页现实的,当前页面只有10条数据,但是打印需要打印完整的100条数据。 并且在当前页面包含了表格之外的标题,菜单等其他元素。 后天api...

1192
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Ajax(七)跨域

跨域这个概念来自一个叫 “同源策略” 的东西。同源策略是浏览器上为了安全考虑实施的非常重要的安全机制。

1474
来自专栏数据结构笔记

Django搭建博客(四):渲染前数据的处理

一个简单得方法就是不直接在模板里使用 date属性,而是使用date属性的year 、month 和 day属性来拼凑我们所需的日期格式。

1102
来自专栏小狼的世界

VIM的常用操作

作为Linux开发的必不可少的工具,能够将Vi的功效发挥到极致,必然能够提高我们的工作效率,下面是一些Vi的使用技巧。

1413
来自专栏24K纯开源

Android Studio快捷键每日一练(4)

33、分析数据流到当前位置 苹果/Windows:无对应快捷键,可在菜单中选择Analyze->Analyze Data Flow to Here 通过分析当前...

2178
来自专栏Django中文社区

真正的 Django 博客首页视图

在此之前我们已经编写了 Blog 的首页视图,并且配置了 URL 和模板,让 Django 能够正确地处理 HTTP 请求并返回合适的 HTTP 响应。不过我们...

3658
来自专栏魏艾斯博客www.vpsss.net

WordPress 外链转内链插件:Simple URLs

2654
来自专栏ASP.NET MVC5 后台权限管理系统

Fastreport.net 如何在开发MVC应用程序时使用报表

2504
来自专栏macOS 开发学习

Mac开发之NSCollectionView使用以及自定义item

与iOS中的UICollectionView相似,在Mac开发中,我们也会常常用到NSCollectionView来展示内容,但在使用中,与iOS有较大差别,尤...

1792

扫码关注云+社区

领取腾讯云代金券