专栏首页前端杂谈使用vue开发项目需要注意的问题和可能踩到的坑

使用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 条评论
登录 后参与评论

相关文章

  • 如何开发中后台项目

    工作中的你,是不是手上做着后台系统项目,应对着做不完的需求,觉得做后台系统是个没有技术含量的活,技术没法提升,这么想或许你就错了,如果能做以到以下几点,不仅可以...

    用户1741436
  • vue调试工具vue-devtools安装及使用

    用户1741436
  • vue使用Axios做ajax请求

    用户1741436
  • R——相关关系热图

    如果想进一步改变图形效果,可以参考pheatmap函数的用法,修改相应的参数。比如:聚类方式改为complete,加上标题等。

    一只羊
  • 加固失败,提示安全风险该怎么解决?

    用户上传的apk,移动安全-应用加固会使用杀毒引擎先过滤一遍,对于出现安全风险的应用不会给予加固操作,因为有安全风险的软件,上架到应用市场也是会被拒绝;

    腾讯云@移动安全
  • 制造业的CPQ软件是如何简化复杂销售的

    复杂产品的制造业企业在产品销售过程中面临着很大的挑战。如何生成准确的报价并生成订单,因高可配置或产品有多个选项,经常被复杂的操作所限制,复杂的配置规则和微薄的利...

    臭豆腐
  • python数据类型

    python编译图 运行python文件的时候,python会通过编译器将它编译成.pyc文件。 如果没有修改python文件,每次执行程序时,就执行前面运行...

    东风冷雪
  • 如何快速分析样本之间的相关性(主成分分析):Clustvis

    首先给大家介绍一下主成分分析(PCA)的定义,PCA是一种通过正交变换将一组可能存在相关性的变量转换为不相关的变量的统计方法,这些转换后的变量就被称为主成分(来...

    用户6317549
  • 分享纯技术创业过程最苦逼的那段历程

    从2010年依靠插件框架创业至今,已有不少年头了。看着我们以前刚创业的照片不禁有感而发,跟大家来分享一下我们创业最苦逼的那段历史。

    哲洛不闹
  • 谈判策略的自动配置(CS.MA)

    在具有线性加性和非线性效用函数的情况下,投标和接受策略对谈判的结果有重大影响。多年来,很明显,没有一种适用于所有谈判环境的最佳策略,但是仍在开发许多固定策略。我...

    蔡小雪7100294

扫码关注云+社区

领取腾讯云代金券