资讯专栏INFORMATION COLUMN

idealcn / 1934人阅读

之前,我发了一些关于HeyUI组件库的一些文章,有些人建议我把开发中遇到的问题共享出来,这一篇算是一个尝试,看大家反馈,会有更多的开发知识共享。

首先,这一篇,说的是vue开发中的“深坑”,并不是有一些文章写的“vue安装失败,模块找不到,或者vue-router如何定义”等等基础错误。

然后,这一篇需要阅读者对vue有着基本的了解,并且使用过,如果你对vue还不懂,建议先收藏,以后再看。

HeyUI

如果对我们组件库不熟悉的小伙伴可以参见我们官网:
heyui.top
或者围观我们的github:
github.com/heyui/heyui

这一篇主要说的是vue使用中遇到的常见并且很难解决的错误,有可能系统没有报错,但是我们就是找不到原因。

问题一、数据修改了,但是界面仍然没有更新

如上图所示,执行结果是:

直接点击change a value是无效的。

先点击change a value无效后,再点击change a value use $set也会无效。

点击change a value use $set有效,并且点击过后,点击change a value又有效了

点击change value后,点击change a value又有效了

点击change b value一直有效

大家应该注意以下事项

由于在data下直接定义的对象,添加属性是不会监听的,比如说value.a在data中其实未定义,你只有通过$set的方式通知vue才能够完成属性赋值并更新视图。

如果对定义的对象直接进行属性添加,会导致$set也会失效。

如果本身data下面的对象的属性已经定义了,对于对象属性的变更是能够被监听的,比如说value.b,你可以直接通过修改b的值来更新视图。

最后一个changeValue方法,是对vue data下的直接属性进行修改,是能够被整个监听到,并且更新属于value下所有子属性的视图。

在线demo: https://codepen.io/vvpvvp/pen/XYvxMg?editors=1010

这个主要问题是,我们开发很少用到$set,所以也很少遇到问题,但是新手成员经常干这种事,还一脸懵逼的问题,是不是vue有问题了?

继续,关于如何优化自己的代码,防止出现这种问题,往下看开发注意事项

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96235.html

相关文章

  • vue中如何实现的自定义按钮

    摘要:在实际开发项目中,有时我们会用到自定义按钮因为一个项目中,众多的页面,为了统一风格,我们会重复用到很多相同或相似的按钮,这时候,自定义按钮组件就派上了大用场,我们把定义好的按钮组件导出,在全局引用,就可以在其他组件随意使用啦,这样可以大幅度 在实际开发项目中,有时我们会用到自定义按钮;因为一个项目中,众多的页面,为了统一风格,我们会重复用到很多相同或相似的按钮,这时候,自定义按钮组件就...

    biaoxiaoduan 评论0 收藏0
  • JavaScript代码整洁之道

    摘要:代码整洁之道整洁的代码不仅仅是让人看起来舒服,更重要的是遵循一些规范能够让你的代码更容易维护,同时降低几率。另外这不是强制的代码规范,就像原文中说的,。里式替换原则父类和子类应该可以被交换使用而不会出错。注释好的代码是自解释的。 JavaScript代码整洁之道 整洁的代码不仅仅是让人看起来舒服,更重要的是遵循一些规范能够让你的代码更容易维护,同时降低bug几率。 原文clean-c...

    liaorio 评论0 收藏0
  • 前端经典面试题总结

    摘要:接着我之前写的一篇有关前端面试题的总结,分享几道比较经典的题目第一题考点作用域,运算符栗子都会进行运算,但是最后之后输出最后一个也就是那么其实就是而且是个匿名函数,也就是属于,就输出第二和第三个都是类似的,而且作用域是都是输出最后一个其实就 接着我之前写的一篇有关前端面试题的总结,分享几道比较经典的题目: 第一题: showImg(https://segmentfault.com/im...

    BlackMass 评论0 收藏0
  • 私有云那家好-六大私有云厂商详细对比!

    对比内容UCloudStackZStackVMwareQingCloud腾讯TStack华为云Stack优势总结•基于公有云自主可控•公有云架构私有化部署•轻量化/轻运维/易用性好•政府行业可复制案例轻量化 IaaS 虚拟化平台•轻量化、产品成熟度高•业内好评度高•功能丰富、交付部署快•中小企业案例多全套虚拟产品及云平台产品•完整生态链、技术成熟•比较全面且健全的渠道•产品成熟度被市场认可,市场占...

    ernest.wang 评论0 收藏0
  • cross-env使用记录

    摘要:能跨平台地设置及使用环境变量让这一切变得简单,不同平台使用唯一指令,无需担心跨平台问题安装方式改写使用了环境变量的常见如在脚本多是里这么配置运行,这样便设置成功,无需担心跨平台问题关于跨平台兼容,有几点注意 cross-env能跨平台地设置及使用环境变量, cross-env让这一切变得简单,不同平台使用唯一指令,无需担心跨平台问题 1、npm安装方式 npm i --save-de...

    Michael_Ding 评论0 收藏0
  • webpack打包插件

    摘要:引入的模块引入的使用将打包打包的拆分将一部分抽离出来物理地址拼接优化打包速度压缩代码,这里使用的是,同样在的里面添加 const path = require(path); //引入node的path模块const webpack = require(webpack); //引入的webpack,使用lodashconst HtmlWebpackPlugin = require(ht...

    ChanceWong 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<