高階前端進階（七）

一曲風流唯少年發表於2022-12-17
前端
最近行程碼下線了，核酸檢測也取消了，但是新冠病毒仍然存在，加上也是流感爆發時期，大家注意防護！！！

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

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

四、最後

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

相關文章