最近行程码下线了           ，核酸检测也取消了 
 
  
 
  
 
  
 
  
 
  
，但是新冠病毒仍然存在









，加上也是流感爆发时期
  
  
  
  
  
 ，大家注意防护！！！

阳性无症状 
  
  
  
  
 ，你可能并没有真的感染新冠 


 


 


 


 


 
，新冠病毒是比普通流感病毒要厉害的
 
 
 
 
 
，会导致发烧的  
   
   
   
   
  ，而且传染性极强  
  
  
  
  
 。

新冠病毒一旦入侵你的免疫系统 

 

 

 

 

 
，会疯狂繁殖

 

 

 

 

 
，免疫系统会杀不过来的           ，那咋办？摆烂 
 

 
 

 
 

 
 

 
 

 
，启动终极保护系统（发烧）










，大家一起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这个组件 

 

 

 

 

 
，会解决很多这方面问题
 
  
 
  
 
  
 
  
 
  
 。

四

 

 

 

 

 
、最后

最近一段时间可以说是极其极其地危险










。流感病毒           、新冠病毒

 

 

 

 

 
，好像又出来了个骆驼病毒等  
  
  
  
  
 。大家注意防护！

但还是不小心感染了           ，那只能凉拌了 
  
  
  
  
  。


 


 


 


 


 

。 
 
 
 
 
。但也别灰心 
 

 
 

 
 

 
 

 
 

 
，大概一周










，就能康复                ，而且会几个月内不会再此感染  
   
   
   
   
   。