文档章节

Vue 小记

吟啸_徐行
 吟啸_徐行
发布于 2017/08/31 15:52
字数 288
阅读 20
收藏 0

场景:Vue spa 需要点击同一路由的时候刷新当前页(组件)

<router-view :key="$route.query.t"></router-view>
router.push({
            path:NameLinkMap[linkName],
            query:{
                t:+ new Date()
            }
        })

原理:利用router-view自身属性向下传递渲染,以及vue的特殊属性key

https://vuejs.org/v2/api/#key

参考issue:https://github.com/vuejs/vue-router/issues/296

场景:console.log调试数据不对劲

在vue全局data中,很可能会碰到刚定义的空数组,输出来就不是空的了,原因是

  1. console.log()传入的参数如果指向一个对象,它记录下的是这个对象的引用。
  2. 当你查看输出结果时,才会读取这个对象,把相关属性和值显示出来

所以后来对数组的修改操作会反应在之前的log中

解决方案:深度拷贝对象,再log

console.log(JSON.parse(JOSN.stringify(o)));

详情参考:http://xuhp.github.io/chrome's-JavaScript-console-is-lazy/

重置component的数据

this.$data = this.$options.data()

重新初始化component

<component :key="key"></component>

给组件一个key值,然后需要初始化的时候就改变key值

© 著作权归作者所有

共有 人打赏支持
上一篇: 前端面试题
吟啸_徐行
粉丝 18
博文 109
码字总数 15832
作品 0
深圳
高级程序员
私信 提问
Vue插件开发流程详解-从开发到发布至npm(二)

 前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html,(这里感谢博客园的网友,给我点赞推荐了) 说到了一个完整的vue插件开发、发布的流程,总结下来就讲了这么一个事,如何注入...

大灰狼的小绵羊哥哥
09/16
0
0
vue插件开发流程详解-从开发到发布至npm(二)

  前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html,说到了一个完整的vue插件开发、发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果封装vue插件,如何测试vue插件,...

阿逗
09/16
0
0
vue-cli新建工程后提高页面加载速度(含升级webpack4)

提高页面加载速度的方式 升级webpack4.x及升级过程中产生问题的解决方式 webpack升级一路填坑记 图片压缩 + 用一个webpack插件,这个插件叫 image-webpack-loader。+ 安装插件: $ npm inst...

YXMBetter
10/18
0
0
Vue 全站缓存之 vue-router-then :前后页数据传递

连续预告了好几天,总算写到这篇了。 系列篇1:Vue 全站缓存之 keep-alive : 动态移除缓存 系列篇2:Vue 全站缓存二:如何设计全站缓存 本篇为系列篇3:Vue 全站缓存之 vue-router-then :前...

wanyaxing
08/02
0
0
Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704
06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Js中DOM事件绑定分析

在这篇文章中小编给大家整理了关于JS中DOM事件绑定的相关知识点,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 #Js事件绑定 Ja...

前端攻城小牛
10分钟前
2
0
指令、伪操作、伪指令和宏指令区别

汇编语言程序中的语句可以由指令、伪指令和宏指令组成。 指令:每一条指令都对应一种CPU操作。 伪指令又称为伪操作,它是在对源程序汇编期间由汇编程序处理的操作,它们可以完成如处理器选择...

二营长意大利炮
11分钟前
1
0
SQL Server SQL语句删除索引

当删除索引提示超时时候,可以使用SQL语句删除索引,可以避免删除索引超时问题。 use [数据库名]drop index [索引名称] on [表名]

产吅经理
11分钟前
1
0
深入解析Axios 常用的请求方法别名

下面小编就为大家分享一篇Axios 常用的请求方法别名,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 #Axios 是一个基于 promise ...

前端攻城老湿
17分钟前
1
0
深入解析Vue开发动态刷新Echarts组件的教程

需求背景:dashboard作为目前企业中后台产品的“门面”,如何更加实时、高效、炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题。今天就从0开始,封装一个动态渲...

peakedness丶
41分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部