解说vue开发过程中的“深坑”，HeyUI组件库开发总结
HeyUI
如果对我们组件库不熟悉的小伙伴可以参见我们官网：heyui.top或者围观我们的github:github.com/heyui/heyui
这一篇主要说的是vue使用中遇到的常见并且很难解决的错误，有可能系统没有报错，但是我们就是找不到原因。
问题一、数据修改了，但是界面仍然没有更新
<template><div id="app"><p>a:{{value.a}}</p><p><button @click="changeValueA">change a value</button></p><p><button @click="changeValueToughA">change a value use $set</button></p><p>b:{{value.b}}</p><p><button @click="changeValueB">change b value</button></p><p><button @click="changeValue">change value</button></p></div>
</template>
<script> new Vue({el: '#app',data: {value: {b: 1}},methods: {changeValueA() {this.value.a = new Date().getTime();},changeValueToughA() {this.$set(this.value, "a", new Date().getTime())},changeValueB() {this.value.b = new Date().getTime();},changeValue() {this.value = {a: 1,b: 2};}}}) </script>
如上图所示，执行结果是：
- 直接点击
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： codepen.io/vvpvvp/pen/…
这个主要问题是，我们开发很少用到$set，所以也很少遇到问题，但是新手成员经常干这种事，还一脸懵逼的问题，是不是vue有问题了?
继续，关于如何优化自己的代码，防止出现这种问题，往下看开发注意事项
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ... [vue] vue开发过程中你有使用什么辅助工具吗? #335 vue-devtools 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌 ... 介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ... 在开发过程中遇到的坑 在使用idea写代码时候,因为文档代码是从pdf中粘贴下来的,到pom文件里面就是这样! 我也是百思不解,后来发现,搜索'-'竟然出来不一致 这就看来不一样了,于是把符号替换掉, ... vue项目中onscroll的坑 在项目中需要监听一个组件的scroll事件,以触发到底时加载更多. 但是实际操作下来发现scroll事件并没有被监听到. 通过查询资料得知,监听的目标元素elemen ... Vue 2 中,使用Vite作为前端构建开发工具,替代webpack(一)--vite.config.js配置文件 当前版本 vite@2.3.7和vite@2.4.4 "vite" ... 如何在vue项目中使用第三方的字体图标库 以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ... Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ... HeyUI组件库 如果你还不了解heyui组件库,欢迎来我们的官网或者github参观. 官网 github 当然,如果能给我们一颗✨✨✨,那是最赞的了! 按需加载 当heyui组件库的组件越来越多的 ...解说vue开发过程中的“深坑”，HeyUI组件库开发总结相关推荐
最新文章
热门文章