跳到主要内容

5 篇博文 含有标签「Vue」

查看所有标签

· 阅读需 6 分钟

项目使用 element-ui，使用了 MessageBox 弹框组件

组件的一个 demo 是这样的，就是可以通过 vnode自定义message的内容

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
      }
    }
  }
</script>

因为项目升级了 vue 的版本为 2.7，所以都使用了setup的方式来写代码。因为vue 2.7 中有一个 h 函数，所以也就直接 import 进来使用

· 阅读需 3 分钟

总结了使用yalc进行本地开发时遇到的问题，以及解决方案

问题点以及解决办法

  1. yalc push的是npm项目打包后的lib产物，每次修改代码都需要build，然后yalc push

    针对每次都要手动更改的问题是必须要解决的，用nodemon就能解决这个问题，只要项目内代码有变更，则执行build命令，打包代码，并且最后用yalc push上传

  1. yalc 包命名如果跟npm包一样，在使用yalc包的demo项目需要频繁修改package.json引入的方式

    实际是package.json的name问题，解决方案是本地调试的使用一个name，正式包的用另一个name，但是为了避免要不断手动改name的麻烦，也是为了避免直接发布错的问题，编写一个webpack 自定义插件，直接修改package.json的name，同时区分开几个环境，不同环境不同name，使得demo发布到不同环境时也能使用不同的npm包。同时编写快速添加yalc和移除yalc包的命令，比如npm run add就能添加yalc包到项目内

  1. demo项目无法识别yalc的更新从而触发热更新，需要手动重新run一次

    同样是使用nodemon 进行处理，检测到.yalc文件夹发生变更就重新运行项目

  1. demo重新运行打包时间比较慢，两边都要重新运行一次到刷新页面的用时比较长

    demo项目可以使用vite作为构建工具，能够显著提高开发环境的构建速度，这样热更新的时间就少了一大半

完整代码可看git地址：https://github.com/LwcReber/yalc-project

· 阅读需 3 分钟

在2.7中新增了Composition API，解决了mixin的问题

如果是老项目可以尝试升级一下，hook的方式极大的提升了代码质量

下面大概说一下源码组合式API的流程

在最新的代码中可以看到vue已经全部使用ts进行了重写，在看源码时提供了极大的便利。

组合式API主要集中在 src/v3文件夹内，完全对应vue3的的组合式API的写法

· 阅读需 19 分钟

如何阅读​

在阅读源码时，我的个人做法是

  1. 网上找找有没有对应博客分享，先去看看别人是如何理解的
  2. 查找有没有对应的源码整体架构图，并不是文件夹目录介绍，是这份源码的实现流程图
  3. 下载源码后，首先要找的就是源码入口
  4. 在阅读源码的过程中，要用思维导图，将自己看过的地方记录下来。并不是记录具体代码，而是代码块实现的什么功能有什么用，记录下来。为什么要这样呢，因为后面再回去看的时候可以结合思维导图，看看什么地方自己了解的，还有什么地方自己不明白的。做到看过也能有印象

入口​

找入口文件​

在package.json中直接找入口，并不是main属性指定的文件地址，因为main属性是production环境下使用的包。

image

在scripts中可以看到dev的环境区分了很多中环境，这里我们主要找的到是web全平台的，也就是第一，在scripts/config.js中有配置

打开scripts/config.js找到对应的环境web-full-dev

'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
  },

可以看到entry已经找到了，因为这个文件有定义了resolve函数，所以entry是src/platforms/web/entry-runtime-with-compiler.js

从这里也能看出vue处理各自不同环境，分别定义不同入口，工程化方面做的非常好

· 阅读需 1 分钟

vue 父组件监听子组件的方法，父组件定义的方法添加额外参数转换​

   <DatePicker :editable="false" type="datetime" @on-change="(...args) => getTime('signTime', ...args)" placeholder="选择时间" format="yyyy-MM-dd HH:mm" v-model="formData.signTime"></DatePicker>

使用 => 函数，重新返回一个新的函数，并且拼接新的形参即可