vue 需要注意的细节(持续更新)
2019-06-14 11:51
155 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_35985787/article/details/91960919
1.在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。
原因:Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和MessageChannel,如果执行环境不支持,会采用 setTimeout(fn, 0)代替。
2.减少dist文件中的map.js
去掉config/index.js中 productionSoureMap:true 改成false
3.路由懒加载写法
{ path: '/personal', name: 'personal', component: (resolve) => require(['@/pages/class/personal'], resolve) },
4.vue进页面第一个input框自动获得焦点
<input v-focus type="text">
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })
directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
相关文章推荐
- Java日常错误及需要注意细节,持续更新......
- 解决算法问题时需要注意的问题(持续更新中)
- Vue.js特别需要注意的细节(仅对自己参考)
- opensocial的细节需要注意哪些?更新中……
- (.Net,DevExpress)关于devexpress部分aspx控件需要注意的细节_持续补充ing
- 需要注意(持续更新)
- 站内更新哪些细节需要注意
- 编写OpenCV程序时,需要注意的事项(持续更新)
- WebView使用时需要注意的细节问题(持续总结)
- 数据库查询需要注意的事项(持续更新)
- hive sql需要注意的地方(持续更新)
- (很乱)编程需要注意的地方,持续更新中...
- easyui使用总结(各种注意的小细节) 持续更新
- 『ExtJS』使用中需要注意的一些事(持续更新)
- SQL —— 一些需要注意的地方(持续更新)
- RTSP服务器配置细节注意(持续更新)
- intellij中maven版本运行Tomcat所需要注意的细节问题
- Vue.set() this.$set()引发的视图更新思考及注意事项
- 小程序开发注意点(持续更新)
- 8点需要注意的Web编程小细节