高级前端进阶(七)

时间:2022-12-17 12:07:51
最近行程码下线了,核酸检测也取消了,但是新冠病毒仍然存在,加上也是流感爆发时期,大家注意防护!!!

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

新冠病毒一旦入侵你的免疫系统,会疯狂繁殖,免疫系统会杀不过来的,那咋办?摆烂,启动终极保护系统(发烧),大家一起GG。长期发热,会对器官有些损伤的。

药物只能缓解症状,真正有效的是你的免疫系统。
高级前端进阶(七)

全局变灰很简单

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这个组件,会解决很多这方面问题。

四、最后

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