最近行程码下线了,核酸检测也取消了,但是新冠病毒仍然存在,加上也是流感爆发时期,大家注意防护!!!
阳性无症状,你可能并没有真的感染新冠,新冠病毒是比普通流感病毒要厉害的,会导致发烧的,而且传染性极强。
新冠病毒一旦入侵你的免疫系统,会疯狂繁殖,免疫系统会杀不过来的,那咋办?摆烂,启动终极保护系统(发烧),大家一起GG。长期发热,会对器官有些损伤的。
药物只能缓解症状,真正有效的是你的免疫系统。
一、页面变灰(CSS中滤镜的使用)全局变灰很简单
filter: grayscale(1);
一行代码即可
部分内容变灰
1、在全局的基础上,给部分内容添加 filter: grayscale(0); 是没有效果的,因为它是滤镜。
2、在部分内容上再添加一层滤镜,逆转全局滤镜效果,方案可行,但暂时好像没有这方面现成的属性来用。里面涉及到图像算法,想逆转不是那么好实现的。
3、取消全局滤镜,遍历,然后给部分内容添加滤镜。虽然是笨方法,但方案可行。
二、Vue文件中为啥this既可以访问data里面的属性,也可以调用methods里面的方法?
其实呢,非常简单。
Vue里面的data是个函数,返回的是一个数据对象,为了组件复用,不共享数据。
Vue里面的methods是个对象,里面包含的全是方法。
所以需要分两类:(当然,还有其他的,prop、computed等等)
举个例子:我写的应该非常非常简化了,还看不懂,自己反思去
function Person(options) { const self = this; // 重写data,源码中对data还做了响应式处理,更复杂 for (let key in options.data()) { self[key] = options.data()[key]; } // 重写方法 for (let key in options.methods) { self[key] = options.methods[key].bind(self); }}let p1 = new Person({ data() { return { x: '123456' } }, methods: { test(val) { console.log('test', val); } }});console.log(p1.x); // 123456console.log(p1.test('456')); // test 456
你可能会疑问:我在Vue文件里面不是这样写的
添加生命周期的话,大家应该能更轻易地明白
function Person(options) { const self = this; // 重写data,源码中对data还做了响应式处理,更复杂 for (let key in options.data()) { self[key] = options.data()[key]; } // 重写方法 for (let key in options.methods) { self[key] = options.methods[key].bind(self); } // 生命周期处理 options.created.call(self);}new Person({ data() { return { x: '123456' } }, methods: { test(val) { console.log('test', val); } }, created(){ console.log(p1.x); // 123456 console.log(p1.test('456')); // test 456 }});
选项式写法的原理
以及
this可以访问对象里面的各种属性及方法,大家应该明白了。
三、Vue的更新setup方法
我们经常会遇到Vue组件中methods太多时,找方法比较累,难以维护,难以往下拓展,这也就导致了Vue框架无法胜任大型前端项目。
这种情况,可能有人会拆分组件,或者使用Minxin解决。但是呢,还是有着很多麻烦的地方。
1、拆分组件,必定会涉及到组件通信的问题,如果拆分得过多,反而等于是给自己添堵。
2、使用Minxin的话,而Minxin的本质是对象合并,如果名称重复的话,会覆盖,容易出现问题。
吸收了React中Hook的优点,setup诞生,主要就是解决这方面的问题,逻辑复用解决了,接着自然而然诞生了组合式写法。从而让Vue框架整体进了一大步,不再局限于只能建立小型网站了,完全可以胜任大型项目。
说句比较现实的话,很多人知道它,但不太会用这玩意儿或者滥用。。。
Suspense组件
我们知道Vue中的生命周期,是不会阻塞组件执行顺序的,它们只是钩子函数。
而Suspense跟setup搭配使用,可以阻塞组件的渲染的。
现在前端中大量存在异步,虽然Suspense还在试验阶段,但这个还是很值得看好的。
很适合组装异步组件以及一些逻辑问题。
能很多人都不知道这玩意儿,压根儿并不知道页面阻塞问题。。。
Teleport组件
在此出现之前,所有的元素都是在app元素容器里面的,想把某些元素放在这个容器之外,有点麻烦,有了Teleport这个组件,会解决很多这方面问题。
四、最后
最近一段时间可以说是极其极其地危险。流感病毒、新冠病毒,好像又出来了个骆驼病毒等。大家注意防护!
但还是不小心感染了,那只能凉拌了。。。但也别灰心,大概一周,就能康复,而且会几个月内不会再此感染。