重读vue3

基础

风格指南

结构风格

vue推荐: 先声明，后使用

<script setup></script>
<template></template>
<style scoped></style>

子组件命名

<!-- 在单文件组件中,推荐为子组件使用PascalCase的标签名,以此来和原生的 HTML 元素作区分 -->
<!-- ✅: 推荐风格:PascalCase,文件名使用kebab-case风格button-counter.vue -->
<ButtonCounter />
<!-- ❎: 不推荐风格:kebab-case -->
<button-counter />

方法命名

<!-- ✅: 推荐风格:kebab-case -->
<MyComponent @some-event="callback" />

cdn方式使用

<!-- 模块化引入cdn js -->
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
</script>

<!-- 导入映射表 -->
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>
<script type="module">
import { createApp } from 'vue'
</script>

全局处理

// 全局错误处理
app.config.errorHandler = (err) => {}
// 全局组件注册(未使用也无法tree-shaking,会打包到js文件,不是大量使用不推荐)
app.component('Component', Component)

多实例挂载

const app1 = createApp(...)
app1.mount('#app1')

const app2 = createApp(...)
app2.mount('#app2')

自定义全局暴露

vue内部沙盒化,只会暴露常用Math和Date等全局对象

// 此时就可以在spa内部使用window变量
app.config.globalProperties.window = window

动态参数

值为null意为显式移除该绑定

<a :[attributeName]="url" @[eventName]="fn">...</a>

响应语法糖

实验性质:不要混用也不要在生产环境使用