search

mip-project / mip

MIT License
11 stars 1 forks source link

MIP2 新设计思路 #17

Open PengXing opened 6 years ago

PengXing commented 6 years ago

在讲新设计思路之前先明确几个前提：

  1. 支持全部的 MIP1 的逻辑，包括组件，提供的工具方法
  2. Vue 只是用来做 customElement 的方案

组件化机制

以下是和之前的设计不同的地方

允许 MIP1 和 MIP2 的组件共存，因为 MIP1 和 MIP2 都将业务逻辑封装在 customElement，无论 customElement 使用什么技术，对别的自定义标签不会有任何的影响，因此 MIP1 和 MIP2 的标签可以做到共存。

MIP2 采用 Vue 作为 customElement 的基础技术，且仅作为 customElement 的基础方案。

Store

MIP1 支持 mip-data 标签，AMP 中有 amp-state 标签，意思上是同样的。

  1. MIP2 可以将 mip-data 视作全局的 state 初始数据，并且允许开发者在 MIP2 的组件里关联全局的 state
  2. MIP2 组件可以在自己的 .vue 里自定义初始数据，使用 initState/initStore
  3. 考虑提供 MIP.setState 方法让组件或者 JS 设置 全局 State
  4. 页面中允许用户书写 JS，该 JS 只能操作 store
<html mip>
...
<script type="mip">
MIP.setState({
  text: 'hello world'
});
</script>
...
</html>

AppShell & Router

AppShell 和 Router 是 MIP1 没有的内容，按照之前的设计就行。

不要用 Vue 作为 Router 的解决方案 原因有以下：

  1. MIP2 只有组件核心和 Vue 有关，其他都很独立
  2. Vue 不能渲染整个 Page，有很多需要改动的地方
  3. Vue 渲染整个 Page 有很大的性能开销
  4. Vue 能做到的事情并不多，transition 手写并不需要什么工作量

综上所述，不要用 Vue 作为包装嵌套 Page 的容器，没有好处，自己写 Router 和 Page 不仅性能好，最重要的是可控。

这里需要着重注意的几个观点是

  1. 完全兼容 MIP1
  2. MIP2 只是扩展了 MIP1 的组件写法和支持 AppShell 和 Router 等
  3. 除了自定义组件和其他新增功能，其他 MIP1 的逻辑保持不变。
xiaoiver commented 6 years ago

我觉得页面上用到的所有的自定义组件在运行时都是由 Vue 渲染的，AppShell 本身（header + router-view 俩组件）也用 Vue 渲染没啥问题吧。如果担心性能问题的话，页面上自定义组件才是数量最多的，每个都会 new 一个 Vue 实例。 另外 transition 是 Vue 提供的，除了路由页面的切换效果，用户的自定义组件也会使用到的吧，没必要手写呀。

PengXing commented 6 years ago

AppShell 就是一个自定义组件 mip-shell，那自然是基于 Vue 的 custom Element 渲染的，但是 Page 不应该用 Vue 包装来渲染

xiaoiver commented 6 years ago

恩是的，淼江他们改了一次之后，现在 Page 也就是 router-view 里面的内容是不会渲染的，看到这些就直接原样输出了，不会进到 Vue 的模板解析过程，效果和 v-pre 一样。

PengXing commented 6 years ago

我再强调一次，Vue 只用来做组件核心，其他地方都和 Vue 没关系

ccksfh commented 6 years ago

对于 store 的新思路，我的调整思路大概是：

mip-data 的数据挂到全局的 mip.state 下面，之前我们说提交组件代码的时候可以同时提交的 store 文件夹也不需要了，即使有那也只是会提交 state；  然后我们还自己再做这个 state 跟页面双向绑定的事儿（感觉这一套下来就跟 mip1一样了，看你新设计方案的描述似乎也是这个想法，沿用 mip1的东西）；  至于允许用户写 js 操作 store 这个事情（应该是 store 不是 DOM 吧 issue 里是不是写错了？），我的想法还是跟之前一样，可以拓展 mip-template，跟 mip-template 绑定来做，毕竟要操作的state 需要跟模板关联，有触发时机/操作才有意义；

虽然之前会上有提到，觉得 vuex 可能有点过于重了，但是我又想起了当初我们对 mip2的定位是要能满足复杂项目的需求的，这一点上其实 vuex 的管理方法是不是相对有优势呢