一、頁面變灰（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這個組件，會解決很多這方面問題，

四、最后

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540215.html

標籤：JavaScript

上一篇：第一百一十四篇: JS陣列Array（三）陣列常用方法

下一篇：高級前端進階（七）