为什么选择stencil
首先，引用官网的话：
-
VirtualDOM // 虚拟dom -
Async rendering // 异步渲染 -
Reactivedata-binding -
TypeScript -
JSX -
Static SiteGeneration (SSG)
但对于我来说，可能没有考虑得这么细致，根本原因就是ui新设计了一整套产品的界面，然后产品觉得里面的日历设计得很不错，既然很不错，那其他的项目不如也？然后就找到了我。于是，封装日历组件这个需求应运而生。
因为公司的技术栈都是围绕vue展开的，而我对本人来说，react，angular，vue都写过，虽然不精通，但好歹也是写过，想着既然这组件也封装，不如一步到位，因为之前对web-component也有了解，又从ionic的文档里看到过stencil，于是，在机缘巧合之下，我就直接打开官网，看起了文档，敲起了代码，研究一下使用stencil封装web-component组件并运用到各个框架中的可行性。
开始
跟着文档走，小键盘npm init stencil就敲了起来
出现3个选项，因为是写组件的demo，前面2个有缘再见，直接切到component，按下回车。输入项目名称，然后就会看见stencil创建的目录。
语法 Stencil的语法和react的十分相似，又结合了angular的些许数据事件的绑定方式，而且基于ts，看起来也十分简单易懂。关于生命周期和api这一块，因为内容比较多，可以去看文档，但生命周期这块值得注意的是带will的生命周期都可以返回一个promise来延迟渲染：
剩下的，本文就主要介绍组件的用法和在各个框架内的展现情况。覆盖的内容具体包括 prop，data，watch，event还有eventEmit。
组件内的render函数的内容都是通过JSX编写的，作为写过react的我也是感觉分外亲切，在基本的组件写完以后，在目录中会有一个index.html，我们把我们的组件名称写进去，再运行npm run start就可以在网页中查看了。
然后我们依次点击按钮，就可以看到右边打印的各种信息。
但因为dom的attribute无法设置为对象，因此监听test变成对象后，value都为[object,object]，检测不到对象的变更，因为 prop中只能监听数据类型为bool，string和number的，需要传递对象的话，则要向stringify一下再parse。
框架表现
简单的组件编写完之后，我们就需要考虑怎么把组件到我们的项目中了，首先，先把我们的包发布到npm上（npm publish），然后开始新建项目，使用npm下载完我们刚刚发布的组件后，看看引入的组件怎么在不同框架环境下的使用，和它的表现有没有和预期的结果不符。
普普通通js
引入 defindeCustomElements注册完自定义组件后，使用方法就和之前我们在项目中使用index.html引入组件的方法如出一辙。
VUE
在vue中，我们新建一个项目以后，需进行一下简单的配置
Angular
老样子，新建项目，然后进行配置，不出意外，angular里需要配置的东西肯定是多一点的
React
依旧是枯燥无味地新建项目，启动项目，然后配置，唯一的区别是react无法像angular和vue一样接收子组件传递过来的checkNumber时间，需要在mounted以后在我们的自定义组件上监听checkNumber事件
其他
一系列地建项目，写demo，启项目以后，发现在各个框架中的表现都和index.html中的完全一致，确实具有一定可行性，唯一不足的就是无法传递object的prop。
但是不用担心，stencil也替我们想好了办法，stencil提供的打包方法内，可以直接把我们的组件封装到一个angular或者react的组件中（没错，没有vue），我们就可以正常传递object了，具体的话可以看文档的FrameworkIntegrations这一块。
因为这块google翻译的太差了，我也翻译不出来，只能贴原文的，有兴趣的老哥可以去对着google 的翻译看一下。
结束
本文到此也就结束了，写文章前确实有点信心满满，想要尽量写得详细，但是写着写着，也就这样了，虽然写得不是那么面面俱到，但是简单的一些实现还有操作也都介绍到了，也算是没有虎头蛇尾，接下来的文章我也会继续努力，争取越写越好。
如果对大家有帮助的话，希望大家能关注我的前端公众号 懒狗小前端
