高级前端进阶（七）
最近行程码下线了，核酸检测也取消了，但是新冠病毒仍然存在，加上也是流感爆发时期，大家注意防护！！！
阳性无症状，你可能并没有真的感染新冠，新冠病毒是比普通流感病毒要厉害的，会导致发烧的，而且传染性极强。
新冠病毒一旦入侵你的免疫系统，会疯狂繁殖，免疫系统会杀不过来的，那咋办？摆烂，启动终极保护系统（发烧），大家一起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); // 123456
console.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这个组件，会解决很多这方面问题。
四、最后
最近一段时间可以说是极其极其地危险。流感病毒、新冠病毒，好像又出来了个骆驼病毒等。大家注意防护！
但还是不小心感染了，那只能凉拌了。。。但也别灰心，大概一周，就能康复，而且会几个月内不会再此感染。
