每周总结第十七期

这里记录过去一周,我的一些小总结。

Feeling

想想自己从小到大一直在做的事,除了抽烟就是喝酒。
二十多年来,不止一次的想要去坚持做一件事,但是往往三天结束,高考那会也未曾幸免,可能以后也不会幸免。
但我还是比较觉得“常立志”,比“立长志”要来的热血一些。因为时不时的兴奋一把,会让我在这活不明白的世上多去感受一些东西。
之前是受阮一峰,阮老师的周五公号文章推送影响,后来是看到很多人在坚持做的一些事,让我也感觉作为一个个体而言,一定要尝试去坚持做一件事。做什么事可能不重要,做的对不对可能也不重要,做的好不好或许也不重要,重要的是不停寻找,找到了这么一件想坚持做下去的事。如果这件事还带给了极大的乐趣与自我满足,那么便是极好的。
就像找另一半一样,如果当作人生的目标去寻找,那肯定会找到的,然后接下来就是油盐酱醋茶,如何平淡而不失乐趣的经营下去。

小丑(Joker)

《小丑》这部电影与今年10月4日在美国上映,「本片的故事独立于DCEU(DC[正义联盟]系列)之外,故事背景设置在20世纪80年代,讲述了一位生活陷入困境的脱口秀喜剧演员渐渐走向精神的崩溃,在哥谭市开始了疯狂的犯罪生涯,最终成为了蝙蝠侠的宿敌“小丑”的故事。」

「他是美国DC漫画旗下的超级反派,常年稳居美媒票选的TOP100漫画反派角色第一名的位置,IGN评选的史上最伟大漫画反派角色中,小丑排名第一。」

看这部电影的来源是:《小丑》超万字终极解析,一个精神病患者从受害者到恶魔的自白

看完这部电影最大的感受是:思想能够上上下下、完完全全改变一个人的所有。

当然这个角色被多数人熟知是在《蝙蝠侠~黑暗骑士》中,在这部电影中,这个小丑「向观众展现了没有逻辑的恶」,小丑饰演者「希斯·莱杰」,「2008年1月22日,被人发现死于纽约的公寓内,时年28岁。很多人猜测他是因为受到了小丑这一角色的不良影响而自杀」。

人人网

「人人网曾是中国领先的实名制社交网络平台。」
「2015年1月30日,人人网发消息称将下线站内信功能。」
「2018年11月14日,人人公司宣布以2000万美元代价把人人社交网络全部资产出售予北京多牛互动传媒股份有限公司 。」
「2019年10月,“人人”APP在苹果商店上架。」

目前人人网之前的账号仍可登录,明星大V们的信息记录都清空了,而作者本人未删除的消息都还在,然后我看了一下之前转发的一些文章,链接到的地址七七八八的被删的差不多。
由小看大,这很有可能说明在网络的世界里,人类的文明、言语、艺术、文化等一些人们真正关注的东西,可能不被历史铭记。各种网站、巨头公司当不存在商业运作的动力时,业务不再继续,信息记录会永远丢在某个硬盘里。人们的言论、关注也在一次次嘈杂之中被淹没。
然而我之前一直认为现在的历史不可能会发生“焚书坑儒”之事,然而,有可能发生的事就一定会发生的。

三种JS方法重定向到另一个网页的方法

  • location.href
  • location.replace
  • location.assign
    所有方法的输出都相同,但location.replace()方法从文档历史记录中删除当前文档的url。因此,如果希望选项导航回原始文档,最好使用location.assign()方法。

Vue.js

Vue源码

「Vue.js 3.x 想全面替代 Vue.js 2.x 需要有相当长的路要走,未来相当长一段时间 Vue.js 2.x 仍然是主流,Vue.js 2.x 的源码学习并没有过时,如果你是一个 Vue.js 2.x 的使用者,就应该去学习 Vue.js 2.x 的源码。」

Vue组件通信有哪几种方式
  • 父子组件通信 : props/$emit
  • 父子组件通信: ref与$parent/$children
  • 父子、隔代、兄弟组件通信:EventBus($emit/$on)
  • 隔代组件通信:$attrs/$listeners
  • 隔代组件通信:provide/inject
  • Vuex适用于父子、隔代、兄弟组件通信。主要包括的模块为:State、getter、Mutation、Action、Module
在Vue2.x中,是如何实现数据双向绑定的

一句话总结:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里的每个数据的读写转换成getter/setter,当数据变化时视图发生更新。

但是Object.defineProperty方法只能对属性进行数据劫持,不能对整个对象进行劫持,同理无法对数组进行劫持,但是,我们在使用Vue框架的时候都知道,Vue能检测到对象和数组(部分方法的操作)的变化,那么它是怎么实现的呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* Observe a list of Array items.
*/
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i]) // observe 功能为监测数据的变化
}
}

/**
* 对属性进行递归遍历
*/
let childOb = !shallow && observe(val) // observe 功能为监测数据的变化

通过以上 Vue 源码部分查看,我们就能知道 Vue 框架是通过遍历数组 和递归遍历对象,从而达到利用 Object.defineProperty() 也能对对象和数组(部分方法的操作)进行监听。

Proxy与Object.definePropertyObject.defineProperty优劣对比

Proxy优势:

  • Proxy可以直接监听对象而非属性
  • Proxy可以直接监听数组的变化
  • Proxy有多达13中拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的。
  • Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改。
  • Proxy作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能红利。
    而Object.defineProperty兼容性好,支持IE9,Proxy存在浏览器兼容性问题,无法用polyfill磨平。
30 道 Vue 面试题,内含详细讲解
liugezhou wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
Enjoy Yourself EveryDay!