Fork me on GitHub

vue3

字数统计: 4.9k字   |   阅读时长≈ 21分

vue3新特性

  • 更好的支持typescript

  • 使用proxy+Reflect代替defineProperty实现响应式

    由于proxy和Reflect的方法一一对应，由proxy监听拦截对应操作，Reflect来完成并返回对应的默认行为,

    • 将条件判断和实际行为优雅的区分,
    • proxy性能更好
    • 数组也可以深度响应(proxy和Reflect都可以操作数组)

  • 重写虚拟dom实现和Tree-Shaking

  • vue3组件的模板可以不只有一个根标签

  • 将不会支持 IE11

vue-cli3 4.5.0以上

生命周期

除了beforeDestroy和destroyed已经改名了不能用， vue2的其他生命周期在vue3同样可用，但vue3都有对应的组合API可以在setup中代替。vue2和vue3生命周期对比： 以下右边的生命周期也可以去掉on可以跟vue2一样option方式定义生命周期

  • beforeCreate和created => setup
  • beforeMount => onBeforeMount
  • mounted => onMounted
  • beforeUpdate => onBeforeUpdate
  • updated => onUpdated
  • beforeDestroy => onBeforeUnmount
  • destroyed => onUnmounted
  • errorCaptured => onErrorCaptured

经过测试同样生命周期定义在setup中都比vue2的方式快，优先级更高

新增renderTracked和renderTriggered开发环境的调试生命周期

  • renderTracked响应数据开始跟踪虚拟dom渲染时触发, type一般是get

  • renderTriggered响应数据重新渲染组件时触发，type一般是set

    这两个生命周期参数对象主要有三个属性:

    • key数据的键
    • target数据的目标对象
    • type操作类型

与customRef中的track和trigger两个函数有渊源

Composition API

vue导出的全局API函数: 如import { 函数 } from 'vue'

  • createApp传入组件，创建应用级实例对象
  • defineComponent定义组件
  • defineAsyncComponent定义懒加载的异步组件，vue2中的()=>import(path)方式已经废弃

响应性API

  • setup 组件方法option

    • setup方法有两个参数: props、context。
      • props或者context.emit都可以接收、调用父组件方法(包括vue2)
    • props, 从父组件传递来的所有props接收的属性
      • context对象内有props（props接收）、attrs（未被接收）、emit、slots(传入的插槽内容对象)、
    • 在所有生命周期之前执行，this获取不到组件实例
    • 组合API的入口，所有组合API函数在这调用，只初始化时执行一次
    • 若返回一个对象，该对象的属性方法都合并到组件模板的渲染上下文(与data数据合并成为组件对象属性,与methods中方法合并成为组件方法 ,setup优先级更高)

  • ref 定义基本类型响应式数据。setup中定义的普通数据不是响应式的，需要通过此函数处理，将返回对象用到模板上。通过操作此函数返回值的value来响应式修改。

    如果传入的是对象，内部使用reactive代理处理，但也要操作value

    • 组件或标签ref属性值可以为ref类型响应式数据的变量名，那么页面挂载后该数据的value就是该组件实例或标签元素

  • shallowRef 定义值类型响应式数据，并且传入对象也不用reactive处理，也就是说所有类型数据只有内存地址修改才能响应

  • triggerRef手动触发一次与shallowRef关联的响应效果(包括使对象深层响应一次)。

    1
    //用watchEffect监听一个shallowRef后，由于shallowRef不能监听对象内层数据，在修改内层数据后调用`triggerRef(shallowRef)`手动触发监听

  • unref返回ref数据的内部value值，不是ref数据则返回数据本身。操作其返回的值就不用每次去ref.value了

  • toRef为reactive创建的响应式对象的属性创建一个ref对象，创建的ref对象跟源属性响应式连接(变化同步): toRef(proxyObj, prop) 常来为复合函数提供响应式对象

  • toRefs将响应式对象转为为普通对象，将此对象内的属性都处理为对应的ref(与源对象属性响应性链接)，方便响应数据解构（解构返回的普通对象）

  • customRef创建自定义的ref,可控制其依赖项跟踪及更新。参数为一个工厂函数: 接收track和trigger函数作为参数，并返回带有get和set的对象。 如可以实现一个带有响应防抖的响应数据:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    setup(p, c) {
      function debounceRef(value: string, delay: number) {
        let timer: number
        return customRef((track: () => void, trigger: () => void) => {
          return {
            get() {
              track()
              return value
            },
            set(val: string) {
              clearTimeout(timer)
              timer = setTimeout(() => {
                value = val
                trigger()
              }, delay)
            }
          }
        })
      }
      return {
        refP: debounceRef('111', 200)
      }
    },

    get中调用track告诉Vue开始追踪这个数据

    set中调用trigger通知view更新视图

  • reactive 定义对象的响应式数据，深层的影响所有嵌套的属性，返回对象的响应式代理器

  • shallowReactive跟reactive一样，但只是第一层属性响应式，深层的都是普通数据

  • readonly和shallowReadonly返回对象的代理数据，该代理数据只读。区别是shallowReadonly仅对第一层只读，深层的不限制。

  • toRaw返回被reactive或readonly代理数据的源对象，包括shallowReactive和shallowReadonly

  • markRaw标记一个对象，使其永远不会被响应式代理。返回对象本身

  • computed返回ref对象，使用返回的ref数据的value。参数可以是两种：

    • 返回计算数据的getter函数
    • 同时包括get和set的对象，不能只有一个

  • watch监听响应式数据变化

    • 监听单个数据，可以是getter函数，也可以是响应式数据(ref或proxy代理对象)。如果是getter则处理函数的参数就是getter的返回值。
    • 要监听简单类型数据，第一个参数必须使用getter函数返回该数据
    • 对于对象、数组等复杂类型，新旧值指向的是同一个内存地址，没有深拷贝
    • 回调新增第三个参数onCleanup 是一个函数，调用后它的回调会在第二次触发watch之前执行

  • 监听多个数据用数组。此时处理函数的参数会是两个数组，数组有与数据相同数量元素，分别对应数据的变化后和变化前的值(对象属性都会成为变化后的值，猜测由于引用类型影响)

    • 第三个参数可传配置对象option，其中:
      • immediate: boolean 初始自动执行一次监听回调
      • deep深层监听数据内部属性, ref响应的对象不会深层监听，需要加deep

  • watchEffect只需要接受一个处理函数

    • 会自动监听处理函数内使用到的响应数据并触发这个函数

  • 初始自动执行一次，相当于watch的immediate。

  • provide和inject 为所有后代组件提供数据

    • 用法: 祖先组件provide(key, value)， 后代组件inject(key)。一般都在setup中使用

    • provide也支持响应式数据，而vue2方式的provide对响应式数据有如下局限:

      • provide内部this未指向组件实例，需要将provide定义为方法，return一个对象，该对象内的this才指向组件组件实例。

        不用响应的数据直接将provide定义为对象，此时内部this不会指向组件实例

      • 提供响应式对象包裹响应式数据才能在子组件响应，也就是提供给后代的数据内存地址不能更改，只能响应数据内部。vue3可随意修改保持响应

记得操作ref对象都要操作其value属性，包括ref对对象隐式使用reactive处理的情况(只要不是直接用reactive)

  • getCurrentInstance 可以在开发环境在setup中通过返回的ctx属性获取到当前组件实例，但是生产环境不行。有些地方说生产环境proxy属性可以获取，但是经尝试根本无法使用

响应式实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//手写reactive实现原理:
//从最外层开始，递归判断每一层的对象和数组，将其用`Proxy`代理, 非对象数组直接返回原数据。readonly等原理类似
//get、set等必须return true否则报错, Reflect操作成功就会返回true
const proxyHandler = {
  get(target: object, key: string) {
    console.log(target, key, `劫持${key} - get`)

    return Reflect.get(target, key)
  },
  set(target: object, key: string, value: any) {
    console.log(target, key, `劫持${key} - set`)
    return Reflect.set(target, key, value)
  },
  deleteProperty(target: object, key: string) {
    console.log(target, key, `劫持${key} - delete`)
    return Reflect.deleteProperty(target, key)
  }
}
function reactive(target: any) {
  //数组和对象都能通过typeof === 'object'这层判断
  if (target && typeof target === 'object') {
    if (Array.isArray(target)) {
      target.forEach((ele, index) => {
        target[index] = reactive(ele)
      })
    } else {
      Object.keys(target).forEach(key => {
        target[key] = reactive(target[key])
      })
    }
    return new Proxy(target, proxyHandler)
  }
  return target
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//ref可以用对象的get、set实现,深层数据用reactive代理
function ref(target: any) {
  target = reactive(target)
  return {
    _value: target,
    get value() {
      console.log('获取value')
      return this._value
    },
    set value(val) {
      console.log('设置value：' + val)
      this._value = val
    }
  }
}

类型判断

vue3可以用全局API判断数据的响应式类型，返回boolean

  • isRef是否是ref数据，内部通过判断__v_isRef属性。包括shallowRef
  • isReactive是否是reactive创建的代理，内部在get中返回了__v_isReactive作为标识。包括shallowReactive
  • isReadonly是否是readonly创建的代理，内部在get中返回了__v_isReadonly作为标识。包括shallowReadonly
  • isProxy是否是reactive或readonly创建的代理，内部判断是否满足isReactive或isReadonly

自定义Hook函数

使用vue3组合API封装的可复用功能函数，作用类似于混入，清楚功能代码来源，更清楚易懂。方式就是使用vue3的全局函数封装为一个功能函数，可返回功能性响应式数据，在任意组件的setup中调用获取并用到模板中。

内置指令

  • v-model

    • v-model:xx="yy"

      使用xx作为modal选项中的prop

    • 修饰符

      • 自定义修饰符capitalize (vue3新增)
      • lazy 输入框发生blur才触发
      • number将字符串转为number
      • trim去掉首末空格

    在vue3当中，v-model对组件默认的prop不再是value，而是modelValue

    默认的event不再是input，而是update:modelValue

内置组件

  • Fragment片段，在vue2中必须有一个根标签，而vue3内部将所有标签包裹在Fragment虚拟元素中不再必须根标签

    • 减少了层级和内存占用

  • Teleport瞬移，可将该组件包裹的元素放到页面任意祖先级元素位置下，而它的逻辑还是在组件内实现

    • to 指定目标祖先元素的选择器，不可以是当前组件内元素。

      若存放teleport的组件作为子组件使用，to也不能是使用此子组件的父组件内的元素

    • disabled 是否禁止瞬移

  • Suspence可以在等待异步组件时渲染一些后备内容进行平滑过渡

    1
    2
    3
    4
    5
    6
    7
    8
    <suspence>
      <template #default>
        <async-component/>
      </template>
      <template #fallback>
        <h2>后备内容</h2>
      </template>
    </suspence>

    我尝试时无效，官方文档也搜不到，可能只是实验性API，或者是脚手架版本问题。过一段时间再看

模块声明

若vue3中使用了ts，引入没有声明文件的js文件会报错，解决方式： 在shims-vue.d.ts中声明对应模块信息

Typescript支持

  • defineComponent 全局方法定义组件可以使ts正确推断 Vue 组件选项中的类型

  • 可以对data返回的数据进行类型断言，对计算属性返回值进行类型声明

  • 不用在setup中声明prop类型，是从定义props选项进行类型推断:

    对定义了type的prop验证，需要将类型提供给typescript，需要用PropType强转构造函数

    1
    2
    3
    4
    5
    //MSG是定义的msg对象的interface
    import { PropType } from 'vue'
    msg: {
         type: Object as PropType<() => MSG>
    }

  • withDefaults对props绑定默认值

  • ref和reactive等调用时可以传递泛型声明类型:

    1
    ref<string | number>('2020')

directive、component这些全局API在main.js/ts中使用必须要在mount挂载前

vuex

  • $store

    需要使用vue的ComponentCustomProperties并定义state接口的约束，否则在组件中使用this.$store没有类型推断

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import { ComponentCustomProperties } from "vue";
    import { Store } from "vuex";
    import { state } from "@/store/index";

    declare module "@vue/runtime-core" {
      interface state {
        name: string;
        value: number;
      }
      interface ComponentCustomProperties {
        $store: Store<state>;
      }
    }

  • useStore

    在setup中需要使用vuex中的useStore方法获取store，但是默认也没有类型支持，最好的方法是自定义useStore方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    //利用了provice/inject特性
    //setup获取store都从此文件引入useStore
    import { createStore, useStore as baseUseStore, Store } from "vuex";
    import { InjectionKey } from "vue";

    export const key: InjectionKey<Store<State>> = Symbol();

    export function useStore(): Store<State> {
      return baseUseStore(key);
    }
    export interface State {
      name: string;
      value?: number;
    }
    //createStore是泛型，可传入state类型
    export default createStore<State>({
      state: {
        name: "xx",
      },
      mutations: {},
      actions: {},
      modules: {},
    });

  • 模块类型支持

    使用Module泛型约束

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //State - 当前子模块state类型 
    //RootState - 根state类型
    import type { Module } from "vuex"
    export const moduleA: Module<State, RootState> {
      state: {
        name: xx-xx
      },
      mutations: {},
      actions: {},
      modules: {},
    }

有一说一，vuex4.x对ts支持真不太行。很多情况下vue3完全可以用reactive组合api来管理状态，或者reactive配合 provide、 inject 来实现状态管理

vue-router

  • 路由规则项routes每一项中，meta默认就有类型支持，但对于其他自定义的配置项需要使用下例RouteRecordRaw扩展的类型来约束routes:

    1
    2
    3
    4
    5
    import { RouteRecordRaw } from "vue-router"
    type CustomRouteRecordRaw = RouteRecordRaw & {
        自定义的项...
    }
    const routes: Array<CustomRouteRecordRaw> = [...路由规则]

axios

​ axios请求函数也支持通过泛型来定义返回res.data的数据

.env环境

  • 在vite中可通过import.meta.env来获取.env文件中的环境变量。除开断言外，环境变量的类型支持可用如下方法：
    • 创建.d.ts声明文件
    • 在声明文件中声明ImportMetaEnv接口

与vue2比较

  • prop自动继承

    • vue2中非prop属性如果不设置inheritAttrs: false，会自动给到组件根节点
    • vue3中由于可以设置多个根节点(fragments)，同样情况对于有多个根节点时会出现警告。必须手动在至少一个根节点上绑定

  • emit事件

    • vue3中触发父组件的自定义事件要先预设emits选项:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      //数组
      emits: [e1, e2]
      //对象 验证参数
      emits: {
        e1: null, //null表示不验证
        e2: (...args) => {
            //参数为触发时的实参
            //返回true验证通过
            return true
        }
      }

  • 异步组件

    • vue3提供defineAsyncComponent函数，返回异步组件对象用于注册，异步组件打包时会拆分为独立chunk,该函数参数：

      1
      2
      3
      4
      5
      6
      //工厂函数，要返回promise，通常配合import
      cont comp = defineAsyncComponent(() => import(path))
      //配置对象
      const comp = defineAsyncComponent({
        loader: () => import(path)
      })

  • 移除了$children

vue3+ts代码校验

vue3+ts+eslint+prettier

.eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
        es6: true
    },
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
        sourceType: 'module',
        jsxPragma: 'React',
        ecmaFeatures: {
            jsx: true
        }
    },
    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
        'plugin:prettier/recommended'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        '@typescript-eslint/no-var-requires': 'off',
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
        'vue/script-setup-uses-vars': 'error',
        '@typescript-eslint/ban-ts-ignore': 'off',
        '@typescript-eslint/explicit-function-return-type': 'off',
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-var-requires': 'off',
        '@typescript-eslint/no-empty-function': 'off',
        'vue/custom-event-name-casing': 'off',
        'vue/v-on-event-hyphenation': 'off',
        'no-use-before-define': 'off',
        '@typescript-eslint/no-use-before-define': 'off',
        '@typescript-eslint/ban-ts-comment': 'off',
        '@typescript-eslint/ban-types': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        '@typescript-eslint/no-unused-vars': [
            'error',
            {
                argsIgnorePattern: '^_',
                varsIgnorePattern: '^_'
            }
        ],
        'no-unused-vars': [
            'error',
            {
                argsIgnorePattern: '^_',
                varsIgnorePattern: '^_'
            }
        ],
        'space-before-function-paren': 'off',

        'vue/attributes-order': 'off',
        'vue/one-component-per-file': 'off',
        'vue/html-closing-bracket-newline': 'off',
        'vue/max-attributes-per-line': 'off',
        'vue/multiline-html-element-content-newline': 'off',
        'vue/singleline-html-element-content-newline': 'off',
        'vue/attribute-hyphenation': 'off',
        'vue/require-default-prop': 'off',
        'vue/require-explicit-emits': 'off',
        'vue/html-self-closing': [
            'error',
            {
                html: {
                    void: 'always',
                    normal: 'never',
                    component: 'always'
                },
                svg: 'always',
                math: 'always'
            }
        ],
        'vue/multi-word-component-names': 'off'
    }
};

.prettierrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
module.exports = {
    // 一行最多 120 字符
    printWidth: 120,
    // 使用 2 个空格缩进
    tabWidth: 2,
    // 使用缩进符，不使用空格
    useTabs: true,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾需要有逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // vue 文件中的 script 和 style 内不用缩进
    vueIndentScriptAndStyle: false,
    // 兼容换行符
    endOfLine: 'auto'
};

setting.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
{
    "typescript.tsdk": "./node_modules/typescript/lib",
    "volar.tsPlugin": true,
    "volar.tsPluginStatus": false,
    "npm.packageManager": "npm",
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.eol": "\n",
    "search.exclude": {
        "**/node_modules": true,
        "**/*.log": true,
        "**/*.log*": true,
        "**/bower_components": true,
        "**/dist": true,
        "**/elehukouben": true,
        "**/.git": true,
        "**/.gitignore": true,
        "**/.svn": true,
        "**/.DS_Store": true,
        "**/.idea": true,
        "**/.vscode": false,
        "**/yarn.lock": true,
        "**/tmp": true,
        "out": true,
        "dist": true,
        "node_modules": true,
        "CHANGELOG.md": true,
        "examples": true,
        "res": true,
        "screenshots": true,
        "yarn-error.log": true,
        "**/.yarn": true
    },
    "files.exclude": {
        "**/.cache": true,
        "**/.editorconfig": true,
        "**/.eslintcache": true,
        "**/bower_components": true,
        "**/.idea": true,
        "**/tmp": true,
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true
    },
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/.vscode/**": true,
        "**/node_modules/**": true,
        "**/tmp/**": true,
        "**/bower_components/**": true,
        "**/dist/**": true,
        "**/yarn.lock": true
    },
    "stylelint.enable": true,
    "stylelint.packageManager": "yarn",
    "path-intellisense.mappings": {
        "/@/": "${workspaceRoot}/src"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[markdown]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[vue]": {
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": false
        }
    },
    "i18n-ally.localesPaths": ["src/locales/lang"],
    "i18n-ally.keystyle": "nested",
    "i18n-ally.sortKeys": true,
    "i18n-ally.namespace": true,
    "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
    "i18n-ally.enabledParsers": ["ts"],
    "i18n-ally.sourceLanguage": "en",
    "i18n-ally.displayLanguage": "zh-CN",
    "i18n-ally.enabledFrameworks": ["vue", "react"],
    "cSpell.words": []
}
赏

谢谢你请我吃糖

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
前端开发、Hexo博客、Vue、微信小程序爱好者