高级前端进阶（七）

最近行程码下线了，核酸检测也取消了，但是新冠病毒仍然存在，加上也是流感爆发时期，大家注意防护！！！

阳性无症状，你可能并没有真的感染新冠，新冠病毒是比普通流感病毒要厉害的，会导致发烧的，而且传染性极强。

新冠病毒一旦入侵你的免疫系统，会疯狂繁殖，免疫系统会杀不过来的，那咋办？摆烂，启动终极保护系统（发烧），大家一起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这个组件，会解决很多这方面问题。

四、最后

最近一段时间可以说是极其极其地危险。流感病毒、新冠病毒，好像又出来了个骆驼病毒等。大家注意防护！
但还是不小心感染了，那只能凉拌了。。。但也别灰心，大概一周，就能康复，而且会几个月内不会再此感染。