一些vue项目的心得

简介: vue项目心得

一些小心得,想整理一下,以前的很多都忘了整理,就像灵感的消失,再也不好找回,所以,要督促自己。后续也会逐渐增加条目,当然也感谢参与。

1、name 的使用

问题起因:由于 router 缓存机制,如果vue页面设置了 name,而这个页面有过访问记录,使用 router 的 push 方法后,页面是不刷新的。

常见场景:管理后台的增删改查后,返回原页面,发现数据并未改变。

解决方法:将 name 值清除掉。

2、$nextTick的使用

问题起因:想在页面节点渲染完成前,对新增节点进行操作,但是却不能准确判定是否加载渲染完毕,导致操作节点时会报错找不到。

常见场景:当渲染一个列表时,或者for循环节点时,又同时想获得改变节点信息,发现报错找不到节点。

解决方法:

在created()钩子函数里,this.$nextTick(函数名),当然如果有从接口获取数据,那就将这部分逻辑也放在created()里,写在this.$nextTick之前。

3、key的妙用

问题起因:key是唯一标识,vue的diff算法对节点的变化监听需要这个值

常见场景:当一个界面同时存在多个form、或者多个table时,有时改变了数据,发现form、table未更新视图

解决方法:出现多个form、table在一个界面时,给他们都设定一个key,且不重复命名。

相关文章
|
3天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
32 11
|
3天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
189 65
|
3天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
191 62
|
1天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
13 10
|
1天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
15 9
|
1天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
13 7
|
3天前
|
JavaScript
vue键盘事件
vue学习(11)键盘事件
|
1天前
|
JavaScript
VUE中el-input阻止冒泡防止触发父级事件
VUE中el-input阻止冒泡防止触发父级事件
|
1天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
1天前
|
JavaScript
vue学习(9)事件处理
vue学习(9)事件处理
11 2