最近行程碼下線了，核酸檢測也取消了，但是新冠病毒仍然存在，加上也是流感爆發時期，大家註意防護！！！

陽性無癥狀，你可能並沒有真的感染新冠，新冠病毒是比普通流感病毒要厲害的，會導致發燒的，而且傳染性極強。

新冠病毒一旦入侵你的免疫系統，會瘋狂繁殖，免疫系統會殺不過來的，那咋辦？擺爛，啟動終極保護系統（發燒），大家一起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這個組件，會解決很多這方面問題。

四、最後

最近一段時間可以說是極其極其地危險。流感病毒、新冠病毒，好像又出來了個駱駝病毒等。大家註意防護！
但還是不小心感染了，那隻能涼拌了。。。但也別灰心，大概一周，就能康復，而且會幾個月內不會再此感染。