从Dialog管理谈到Vue渲染原理

2018-12-07 admin

作为一个中后台表单&表格工程师,经常需要在一个页面中处理多个弹窗。我自己的项目中,一个复杂的审核页面中的弹窗数量超过了30个,如何管理大量的弹窗就成为了一个需要考虑的问题。

大量的弹窗有什么问题

假设你有一个弹窗组件,类似于element-ui的Dialog,如果简单粗暴的每一个弹窗都写一个dialog,那么会有以下问题:

  • 模板过长,且大量冗余
  • 命名困难,每一个弹窗需要一个变量去控制显示,通常每一个弹窗里面也是一个表单,又需要一个变量保存表单数据,每个弹窗也有自己的逻辑(method),都要写在这个页面,要绞尽脑汁去取名
  • 非常的不优雅,简直就是Repeat yourself反模式的示范。。。

把每个弹窗抽成模块

一个很容易想到的优化方法就是把一个弹窗作为一个组件抽离出去,每个弹窗的逻辑单独写在组件中。

这样通过组件拆分做很好的解决了模板过长的问题,也基本解决了命名困难的问题,不过还是需要很多的变量去控制每个组件的显示。

使用动态Component

第一个办法本质上并没有减少重复的代码和逻辑(弹窗显示/关闭),只是把代码放在了不同的文件当中。

显然,我并不需要写那么多的Dialog,Dialog本身并没有变,作为一个「包裹」组件,变的只是内容。

所以,只需要写一个dialog,配合Vue的动态组件Component,切换不同的组件就行了。

全局Dialog

使用Component,我们做到了一个页面只需要一个Dialog,但其实整个网页,也只需要一个全局的Dialog。

我们在根组件下挂一个Dialog组件,组件内容依然使用动态component,组件的数据流转,component传递等使用Vuex进行。

使用函数创建组件

作为单个项目的解决方案,全局Dialog加动态Component其实已经足够好了,使用一个函数调用就可以显示弹窗。

this.$dialog({
  title: '我是弹窗',
  component: Test,
  props: { props }, // Test的props通过这样传递
})

但是想要作为通用解决方案,还不够:

  • 引入不方便,需要手动在跟组件下引入并写上封装好的弹窗组件
  • 必须使用Vuex进行数据流转,而并不是每个Vue项目都使用Vuex的
  • 没法监听事件,只能传入回调
  • props的传递方式不够优雅,不够声明式

在我心中,一个理想的弹窗组件,需要是这样的:

  • 引入方便,Vue.use(Dialog)就行了

  • 使用简洁

      this.$dialog({
        title: '哎呀不错哦',
        component: () => <Test onDone={ this.fetchData } name={ this.name }/>
      })
    

Let’s go.

使用$mount

Vue作为一个视图层的框架,核心其实就是渲染函数,所以一定有一个办法,可以把一个Vue组件渲染成一个DOM,这个方法就是$mount。

// 这个Dialog组件就是写好的弹窗组件
import Dialog from './Dialog'

// dialog是一个单例,不需要重复创建
let dialog
export default function createDialog(Vue, { store = {}, router = {} }, options) {
  if (dialog) {
    dialog.options = {
      ...options,
    }

    dialog.$children[0].visible = true
  } else {
    dialog = new Vue({
      name: 'Root-Dialog',
      router,
      store,
      data() {
        return {
          options: { ...options },
        }
      },
      render(h) {
        return h(Dialog, {
          props: this.options,
        })
      },
    })

    // 渲染出DOM并手动插入到body
    dialog.$mount()
    document.body.appendChild(dialog.$el)
  }

  // 暴露close方法
  return {
    close: () => dialog.$children[0].close(),
  }
}

Dialog组件

基于element-ui的Dialog组件二次封装,在原有的props之外,添加一个component,使用动态Component渲染上去就行了。 思路很简单,但是有几个问题需要考虑。

生命周期问题

如果不做任何处理,当弹窗消失的时候component并不会销毁;当再次显示弹窗时,会传入一个新的组件,这个时候,上一个组件才销毁,这非常不合理。所以我们需要在弹窗消失的时候手动销毁传入的component。

注入事件

Vue的动态Component组件的is属性接受的值有3种类型:

  • string,在当前组件内注册过的组件的名称
  • ComponentDefinition,就是一个组件的选项对象,new Vue时传的那个对象
  • ComponentConstructor,返回一个ComponentDefinition的函数,比如动态import函数

而我们希望的调用形式里,component是一个返回jsx的函数,而它会被babel插件babel-plugin-transform-vue-jsx转换为调用createElement函数的结果,也就是说

() => <Test >

这个函数最终返回的是一个Virtual Node。 而Vue的选项里面,render最终返回的也是一个VNode。 也就是说,() => <Test >这个函数可以作为一个Vue组件的render选项,所以,我们需要构造一个完整的Vue选项对象,然后将这个对象作为动态component的is属性,这样就可以渲染出这个Test组件了。

在这个过程中,我们可以在这个Vnode里面做一些有趣的事情,比如注入事件。

为什么要注入事件

首先,这里有一个刚需:弹窗内的组件需要可以关闭弹窗,也就是它的父组件。 通常有两个办法可以做到:

  • 通过props接收一个函数,调用它可以关闭弹窗
  • 主动抛出一个事件,dialog组件监听这个事件,然后把自己关了

略微比较一下就可以发现,抛出事件的方法优于回调函数的办法(通常来说,「事件」都优于「回调」):

  • 代码少, $emit(‘complete’)就行了,使用回调需要添加一个props,调用的时候还需要判断它是否存在
  • 通用性更好,这个组件可能不仅仅只在弹窗内调用,它可以在其它任何地方被调用,使用事件只需要简单的抛出一个事件,表示我完成了,调用它的组件根据自身的逻辑来进行接下来的工作,这样组件本身做到了低耦合。

但是,抛出事件的实现却要比传入回调难很多,需要对VNode比较熟悉。

在Dialog组件内,我们触及不到组件的模板,所以简单的在动态component模板上添加 @done 并不能完成事件监听。因为事件监听其实是在render的过程中进行的,而我们的render是通过jsx的方式在调用$dialog函数时传入的,所以只能手动在生成的VNode上添加事件监听:

在 vNode.componentOptions.listeners中,添加我们需要监听的事件和事件处理函数:

let listeners = vNode.componentOptions.listeners

if (!listeners) {
  listeners = {}
  vNode.componentOptions.listeners = listeners
}

// 添加done
const orginDoneHandler = listeners.done
listeners.done = function () {
  if (orginDoneHandler) orginDoneHandler()
  doneHandler()
}

// 添加cancel
const orginCancelHandler = listeners.cancel
listeners.cancel = function () {
  if (orginCancelHandler) orginCancelHandler()
  cancelHandler()
}

在Dialog中,监听了动态component的donecancel事件,在任一事件触发后都会关闭Dialog,组件$emit(‘done’)表示完成了自己的业务,$emit('cancel)表示取消了自己的业务

主动收集依赖

到这里,还有一个问题没有解决:这个组件还不是响应式的,比如说,你在一个index组件中通过$dialog显示一个弹窗

this.$dialog({
  title: '响应式',
  component: () => <Test text={ this.text }/>
})

当text更新时,弹窗中的内容并没有更新,也就说,组件没有重新渲染。

Vue的渲染流程与依赖收集

这里就要涉及到一些Vue的原理了,比如说渲染流程,依赖收集,一两句话也讲不清楚,我试着大概的说一下:

首先,页面上显示的数据变了,一定是触发了重新渲染,this.text = ‘新的text’ 之所以会更新页面,可以理解为一个渲染函数在this.text的setter中执行了。

那么,this.text的getter怎么样才能知道要执行哪些函数,就是通过所谓的依赖收集。简单来说,依赖收集是在渲染函数(渲染Vnode的函数)中进行的,在createElement中一旦通过this.text使用了这个变量,通过这个变量的getter就收集到了正在执行的渲染函数这一个依赖。

所以,粗暴的讲,需要把this.text的访问放在一个render函数(Vue选项对象的render)中进行。平常用的模板其实也是这样,因为它最终都被Vue-loader编译成了render。

_component() {
  // 这一步很重要,让component收集到了这个计算属性的依赖,否则当component变化时不会重新渲染组件
  const fn = this.component
  let vNode

  // 返回vue选项对象
  const that = this
  return {
    name: 'dynamic-wrapper',

    render() {
      // fn的运行一定要在render函数中,也是为了挂载依赖
      vNode = fn()
      ...
    }
}

所以,这就是为什么一定要使用一个返回jsx的函数作为,而不是直接美滋滋的使用jsx。因为,臣妾实在是做不到响应式呀~

this.$dialog({
  title: '臣妾做不到啊~',
  component: <Text text={ this.text }/>,
})

等于

// this.text的值为text
this.$dialog({
  title: '臣妾做不到啊~',
  component: createElement(
    Text,
    props: {
      text: 'text',
    }
  )
})

完整代码,拍着胸脯保证可用,已经在生产环境大量使用超过3个月的时间了。

原文链接:https://segmentfault.com/a/1190000017288448

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47480.html

文章标题:从Dialog管理谈到Vue渲染原理

相关文章
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
从 JavaScript 到 TypeScript - 声明类型
从 JavaScript 语法改写为 TypeScript 语法,有两个关键点,一点是类成员变量 (Field) 需要声明,另一点是要为各种东西 (变量、参数、函数 / 方法等) 声明类型。而这两个点直接引出了两个关键性的问题,有哪些类型?...
2017-06-05
Bootstrap BootstrapDialog使用详解
这里有两种展现方式 写在前面:首先你要引入的库有 css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstr...
2017-03-16
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
回到顶部