PintereStory

Vue选项式API：生命周期API

beforeCreate

在组件实例初始化完成之后立即调用。

类型

interface ComponentOptions {
  beforeCreate?(this: ComponentPublicInstance): void
}

详细信息
在实例初始化完成并且 props 被解析后立即调用。
接着 props 会被定义成响应式属性，data() 和 computed 等选项也开始进行处理。
注意，组合式 API 中的 setup() 钩子会在所有选项式 API 钩子之前调用，beforeCreate() 也不例外。

created

在组件实例处理完所有与状态相关的选项后调用。

类型

interface ComponentOptions {
  created?(this: ComponentPublicInstance): void
}

详细信息
当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。

beforeMount

在组件被挂载之前调用。

类型

interface ComponentOptions {
  beforeMount?(this: ComponentPublicInstance): void
}

详细信息
当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
这个钩子在服务端渲染时不会被调用。

mounted

在组件被挂载之后调用。

类型

interface ComponentOptions {
  mounted?(this: ComponentPublicInstance): void
}

详细信息
组件在以下情况下被视为已挂载：
- 所有同步子组件都已经被挂载。(不包含异步组件或 <Suspense> 树内的组件)
- 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。
这个钩子在服务端渲染时不会被调用。

beforeUpdate

在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。

类型

interface ComponentOptions {
  beforeUpdate?(this: ComponentPublicInstance): void
}

详细信息
这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
这个钩子在服务端渲染时不会被调用。

updated

在组件因为一个响应式状态变更而更新其 DOM 树之后调用。

类型

interface ComponentOptions {
  updated?(this: ComponentPublicInstance): void
}

详细信息
父组件的更新钩子将在其子组件的更新钩子之后调用。
这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。
这个钩子在服务端渲染时不会被调用。
WARNING
不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！

beforeUnmount

在一个组件实例被卸载之前调用。

类型

interface ComponentOptions {
  beforeUnmount?(this: ComponentPublicInstance): void
}

详细信息
当这个钩子被调用时，组件实例依然还保有全部的功能。
这个钩子在服务端渲染时不会被调用。

unmounted

在一个组件实例被卸载之后调用。

类型

interface ComponentOptions {
  unmounted?(this: ComponentPublicInstance): void
}

详细信息
一个组件在以下情况下被视为已卸载：
- 其所有子组件都已经被卸载。
- 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。
可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。
这个钩子在服务端渲染时不会被调用。

errorCaptured

在捕获了后代组件传递的错误时调用。

类型

interface ComponentOptions {
  errorCaptured?(
    this: ComponentPublicInstance,
    err: unknown,
    instance: ComponentPublicInstance | null,
    info: string
  ): boolean | void
}

详细信息
错误可以从以下几个来源中捕获：
- 组件渲染
- 事件处理器
- 生命周期钩子
- setup() 函数
- 侦听器
- 自定义指令钩子
- 过渡钩子
这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。
TIP
在生产环境中，第三个参数 (info) 是一个缩短的代码，而不是含有完整信息的字符串。错误代码和字符串的映射可以参阅生产环境错误代码参考。
你可以在 errorCaptured() 中更改组件状态来为用户显示一个错误状态。然而重要的是，不要让错误状态渲染为导致本次错误的内容，否则组件就会进入无限的渲染循环中。
这个钩子可以通过返回 false 来阻止错误继续向上传递。请看下方的传递细节介绍。
错误传递规则
- 默认情况下，所有的错误都会被发送到应用级的 app.config.errorHandler (前提是这个函数已经定义)，这样这些错误都能在一个统一的地方报告给分析服务。
- 如果组件的继承链或组件链上存在多个 errorCaptured 钩子，对于同一个错误，这些钩子会被按从底至上的顺序一一调用。这个过程被称为“向上传递”，类似于原生 DOM 事件的冒泡机制。
- 如果 errorCaptured 钩子本身抛出了一个错误，那么这个错误和原来捕获到的错误都将被发送到 app.config.errorHandler。
- errorCaptured 钩子可以通过返回 false 来阻止错误继续向上传递。即表示“这个错误已经被处理了，应当被忽略”，它将阻止其他的 errorCaptured 钩子或 app.config.errorHandler 因这个错误而被调用。

renderTracked

在一个响应式依赖被组件的渲染作用追踪后调用。

这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

类型

interface ComponentOptions {
  renderTracked?(this: ComponentPublicInstance, e: DebuggerEvent): void
}

type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
  key: any
}

参考深入响应式系统

renderTriggered

在一个响应式依赖被组件触发了重新渲染之后调用。

这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

类型

interface ComponentOptions {
  renderTriggered?(this: ComponentPublicInstance, e: DebuggerEvent): void
}

type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */
  key: any
  newValue?: any
  oldValue?: any
  oldTarget?: Map<any, any> | Set<any>
}

参考深入响应式系统

activated

若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。

这个钩子在服务端渲染时不会被调用。

类型

interface ComponentOptions {
  activated?(this: ComponentPublicInstance): void
}

参考指南 - 被缓存实例的生命周期

deactivated

若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。

这个钩子在服务端渲染时不会被调用。

类型

interface ComponentOptions {
  deactivated?(this: ComponentPublicInstance): void
}

参考指南 - 被缓存实例的生命周期

serverPrefetch

当组件实例在服务器上被渲染之前要完成的异步函数。

类型

interface ComponentOptions {
  serverPrefetch?(this: ComponentPublicInstance): Promise<any>
}

详细信息
如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。
这个钩子仅会在服务端渲染中执行，可以用于执行一些仅在服务端才有的数据抓取过程。

示例

export default {
  data() {
    return {
      data: null
    }
  },
  async serverPrefetch() {
    // 组件会作为初次请求的一部分被渲染
    // 会在服务端预抓取数据，因为这比客户端更快
    this.data = await fetchOnServer(/* ... */)
  },
  async mounted() {
    if (!this.data) {
      // 如果数据在挂载时是 null，这意味着这个组件
      // 是在客户端动态渲染的，请另外执行一个
      // 客户端请求作为替代
      this.data = await fetchOnClient(/* ... */)
    }
  }
}

参考服务端渲染

VueJs

2024-05-23

来源：生命周期选项 | Vue.js

vue样式穿透 ::v-deep的具体使用

尘汐 2021-07-05

之前在项目中用到了 element UI，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式，但如果去掉 scoped 话又会影响全局样式。想了好多方法，都没得到很好的解决。最后呢，还是通过翻阅官方文档才解决的。其实官方文档早就给出了解决方案，怪自己没有认真看文档，对 vue 的掌握还是不够熟悉啊

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得 '更深' ，例如影响子组件，你可以使用 >>> 操作符：


<style scoped> 
.a >>> .b { /* ... */ } </style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* … */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作

例如：

1 >>> 如果vue的style使用的是css，那么则


<style lang="css" scoped>
.a >>> .b { 
 /* ... */
}
</style>

但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.

2 /deep/


<style lang="scss" scoped>
.a{
 /deep/ .b { 
  /* ... */
 }
} 
</style>

但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。此时我们可以使用第三种方式

3 ::v-deep 切记必须是双冒号


<style lang="scss" scoped>
.a{
 ::v-deep .b { 
  /* ... */
 }
} 
</style>

使用场景:

当我们需要覆盖 element-ui 中的样式时只能通过深度作用选择器：

style 为 css 时的写法如下


.a >>> .b {
 ***
}

style使用css的预处理器(less, sass, scss)的写法如下


// 第一种/deep/
/deep/ .a {
 ***
}

// 第二种::v-deep
::v-deep .a{
 ***
}

建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快

注意：动态生成的内容不受 `scoped` 影响

通过 v-html 创建的 DOM 内容不受 scoped 样式影响，但是你仍然可以通过 深度作用选择器 >>> 来为他们设置样式

VueJs

2024-05-30

来源： vue样式穿透 ::v-deep的具体使用 - 掘金

Vue 插槽 Slots

举例来说，这里有一个 <FancyButton> 组件，可以像这样使用： <FancyButton> Click me!  </FancyButton> 而 <FancyButton> 的模板是这样的： <button class="fancy-btn"> <slot></slot>  </button> <slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

VueJs

2024-06-04

来源：插槽 Slots | Vue.js

Vue Props 简要教程

此章节假设你已经看过了组件基础。若你还不了解组件是什么，请先阅读该章节。

Props 声明

一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute (关于透传 attribute，我们会在专门的章节中讨论)。

在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明：

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

在没有使用 <script setup> 的组件中，props 可以使用 props 选项来声明：

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

注意传递给 defineProps() 的参数和提供给 props 选项的值是相同的，两种声明方式背后其实使用的都是 props 选项。

props 需要使用 props 选项来定义：

export default {
  props: ['foo'],
  created() {
    // props 会暴露到 `this` 上
    console.log(this.foo)
  }
}

除了使用字符串数组来声明 props 外，还可以使用对象的形式：

export default {
  props: {
    title: String,
    likes: Number
  }
}

// 使用 <script setup>
defineProps({
  title: String,
  likes: Number
})

// 非 <script setup>
export default {
  props: {
    title: String,
    likes: Number
  }
}

对于以对象形式声明的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数。比如，如果要求一个 prop 的值是 number 类型，则可使用 Number 构造函数作为其声明的值。

对象形式的 props 声明不仅可以一定程度上作为组件的文档，而且如果其他开发者在使用你的组件时传递了错误的类型，也会在浏览器控制台中抛出警告。我们将在本章节稍后进一步讨论有关 prop 校验的更多细节。

TypeScript 用户请参考：为组件 Props 标注类型

如果你正在搭配 TypeScript 使用 <script setup>，也可以使用类型标注来声明 props：

<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>

更多关于基于类型的声明的细节请参考组件 props 类型标注。

传递 prop 的细节

Prop 名字格式

如果一个 prop 的名字很长，应使用 camelCase 形式，因为它们是合法的 JavaScript 标识符，可以直接在模板的表达式中使用，也可以避免在作为属性 key 名时必须加上引号。

defineProps({
  greetingMessage: String
})

export default {
  props: {
    greetingMessage: String
  }
}

<span>{{ greetingMessage }}</span>

虽然理论上你也可以在向子组件传递 props 时使用 camelCase 形式 (使用 DOM 内模板时例外)，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式：

<MyComponent greeting-message="hello" />

对于组件名我们推荐使用 PascalCase，因为这提高了模板的可读性，能帮助我们区分 Vue 组件和原生 HTML 元素。然而对于传递 props 来说，使用 camelCase 并没有太多优势，因此我们推荐更贴近 HTML 的书写风格。

静态 vs. 动态 Props

至此，你已经见过了很多像这样的静态值形式的 props：

<BlogPost title="My journey with Vue" />

相应地，还有使用 v-bind 或缩写 : 来进行动态绑定的 props：

<!-- 根据一个变量的值动态传入 -->
<BlogPost :title="post.title" />

<!-- 根据一个更复杂表达式的值动态传入 -->
<BlogPost :title="post.title + ' by ' + post.author.name" />

传递不同的值类型

在上述的两个例子中，我们只传入了字符串值，但实际上任何类型的值都可以作为 props 的值被传递。

Number

<!-- 虽然 `42` 是个常量，我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :likes="42" />

<!-- 根据一个变量的值动态传入 -->
<BlogPost :likes="post.likes" />

Boolean

<!-- 仅写上 prop 但不传值，会隐式转换为 `true` -->
<BlogPost is-published />

<!-- 虽然 `false` 是静态的值，我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :is-published="false" />

<!-- 根据一个变量的值动态传入 -->
<BlogPost :is-published="post.isPublished" />

Array

<!-- 虽然这个数组是个常量，我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :comment-ids="[234, 266, 273]" />

<!-- 根据一个变量的值动态传入 -->
<BlogPost :comment-ids="post.commentIds" />

Object

<!-- 虽然这个对象字面量是个常量，我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
 />

<!-- 根据一个变量的值动态传入 -->
<BlogPost :author="post.author" />

使用一个对象绑定多个 prop

如果你想要将一个对象的所有属性都当作 props 传入，你可以使用没有参数的 v-bind，即只使用 v-bind 而非 :prop-name。例如，这里有一个 post 对象：

export default {
  data() {
    return {
      post: {
        id: 1,
        title: 'My Journey with Vue'
      }
    }
  }
}

const post = {
  id: 1,
  title: 'My Journey with Vue'
}

以及下面的模板：

<BlogPost v-bind="post" />

而这实际上等价于：

<BlogPost :id="post.id" :title="post.title" />

单向数据流

所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。

另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。若你这么做了，Vue 会在控制台上向你抛出警告：

const props = defineProps(['foo'])

// ❌ 警告！prop 是只读的！
props.foo = 'bar'

export default {
  props: ['foo'],
  created() {
    // ❌ 警告！prop 是只读的！
    this.foo = 'bar'
  }
}

导致你想要更改一个 prop 的需求通常来源于以下两种场景：

prop 被用于传入初始值；而子组件想在之后将其作为一个局部数据属性。在这种情况下，最好是新定义一个局部数据属性，从 props 上获取初始值即可：

const props = defineProps(['initialCounter'])

// 计数器只是将 props.initialCounter 作为初始值
// 像下面这样做就使 prop 和后续更新无关了
const counter = ref(props.initialCounter)

export default {
  props: ['initialCounter'],
  data() {
    return {
      // 计数器只是将 this.initialCounter 作为初始值
      // 像下面这样做就使 prop 和后续更新无关了
      counter: this.initialCounter
    }
  }
}

需要对传入的 prop 值做进一步的转换。在这种情况中，最好是基于该 prop 值定义一个计算属性：

const props = defineProps(['size'])

// 该 prop 变更时计算属性也会自动更新
const normalizedSize = computed(() => props.size.trim().toLowerCase())

export default {
  props: ['size'],
  computed: {
    // 该 prop 变更时计算属性也会自动更新
    normalizedSize() {
      return this.size.trim().toLowerCase()
    }
  }
}

更改对象 / 数组类型的 props

当对象或数组作为 props 被传入时，虽然子组件无法更改 props 绑定，但仍然可以更改对象或数组内部的值。这是因为 JavaScript 的对象和数组是按引用传递，对 Vue 来说，阻止这种更改需要付出的代价异常昂贵。

这种更改的主要缺陷是它允许了子组件以某种不明显的方式影响父组件的状态，可能会使数据流在将来变得更难以理解。在最佳实践中，你应该尽可能避免这样的更改，除非父子组件在设计上本来就需要紧密耦合。在大多数场景下，子组件应该抛出一个事件来通知父组件做出改变。

Prop 校验

Vue 组件可以更细致地声明对传入的 props 的校验要求。比如我们上面已经看到过的类型声明，如果传入的值不满足类型要求，Vue 会在浏览器控制台中抛出警告来提醒使用者。这在开发给其他开发者使用的组件时非常有用。

要声明对 props 的校验，你可以向 defineProps() 宏props 选项提供一个带有 props 校验选项的对象，例如：

defineProps({
  // 基础类型检查
  // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传，且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // 必传但可为空的字符串
  propD: {
    type: [String, null],
    required: true
  },
  // Number 类型的默认值
  propE: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propF: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello' }
    }
  },
  // 自定义类型校验函数
  // 在 3.4+ 中完整的 props 作为第二个参数传入
  propG: {
    validator(value, props) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // 函数类型的默认值
  propH: {
    type: Function,
    // 不像对象或数组的默认，这不是一个
    // 工厂函数。这会是一个用来作为默认值的函数
    default() {
      return 'Default function'
    }
  }
})

TIP

defineProps() 宏中的参数不可以访问 <script setup> 中定义的其他变量，因为在编译时整个表达式都会被移到外部的函数中。

export default {
  props: {
    // 基础类型检查
    //（给出 `null` 和 `undefined` 值则会跳过任何类型检查）
    propA: Number,
    // 多种可能的类型
    propB: [String, Number],
    // 必传，且为 String 类型
    propC: {
      type: String,
      required: true
    },
    // 必传但可为空的字符串
    propD: {
      type: [String, null],
      required: true
    },
    // Number 类型的默认值
    propE: {
      type: Number,
      default: 100
    },
    // 对象类型的默认值
    propF: {
      type: Object,
      // 对象或者数组应当用工厂函数返回。
      // 工厂函数会收到组件所接收的原始 props
      // 作为参数
      default(rawProps) {
        return { message: 'hello' }
      }
    },
    // 自定义类型校验函数
    // 在 3.4+ 中完整的 props 作为第二个参数传入
    propG: {
      validator(value, props) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 函数类型的默认值
    propH: {
      type: Function,
      // 不像对象或数组的默认，这不是一个
      // 工厂函数。这会是一个用来作为默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
}

一些补充细节：

所有 prop 默认都是可选的，除非声明了 required: true。
除 Boolean 外的未传递的可选 prop 将会有一个默认值 undefined。
Boolean 类型的未传递 prop 将被转换为 false。这可以通过为它设置 default 来更改——例如：设置为 default: undefined 将与非布尔类型的 prop 的行为保持一致。
如果声明了 default 值，那么在 prop 的值被解析为 undefined 时，无论 prop 是未被传递还是显式指明的 undefined，都会改为 default 值。

当 prop 的校验失败后，Vue 会抛出一个控制台警告 (在开发模式下)。

如果使用了基于类型的 prop 声明，Vue 会尽最大努力在运行时按照 prop 的类型标注进行编译。举例来说，defineProps<{ msg: string }> 会被编译为 { msg: { type: String, required: true }}。

注意

注意 prop 的校验是在组件实例被创建之前，所以实例的属性 (比如 data、computed 等) 将在 default 或 validator 函数中不可用。

运行时类型检查

校验选项中的 type 可以是下列这些原生构造函数：

String
Number
Boolean
Array
Object
Date
Function
Symbol
Error

另外，type 也可以是自定义的类或构造函数，Vue 将会通过 instanceof 来检查类型是否匹配。例如下面这个类：

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
}

你可以将其作为一个 prop 的类型：

defineProps({
  author: Person
})

export default {
  props: {
    author: Person
  }
}

Vue 会通过 instanceof Person 来校验 author prop 的值是否是 Person 类的一个实例。

可为空的类型

如果该类型是必传的但可为空，你可以用一个包含 null 的数组语法：

defineProps({
  id: {
    type: [String, null],
    required: true
  }
})

export default {
  props: {
    id: {
      type: [String, null],
      required: true
    }
  }
}

注意如果 type 仅为 null 而非使用数组语法，它将允许任何类型。

Boolean 类型转换

为了更贴近原生 boolean attributes 的行为，声明为 Boolean 类型的 props 有特别的类型转换规则。以带有如下声明的 <MyComponent> 组件为例：

defineProps({
  disabled: Boolean
})

export default {
  props: {
    disabled: Boolean
  }
}

该组件可以被这样使用：

<!-- 等同于传入 :disabled="true" -->
<MyComponent disabled />

<!-- 等同于传入 :disabled="false" -->
<MyComponent />

当一个 prop 被声明为允许多种类型时，Boolean 的转换规则也将被应用。然而，当同时允许 String 和 Boolean 时，有一种边缘情况——只有当 Boolean 出现在 String 之前时，Boolean 转换规则才适用：

// disabled 将被转换为 true
defineProps({
  disabled: [Boolean, Number]
})

// disabled 将被转换为 true
defineProps({
  disabled: [Boolean, String]
})

// disabled 将被转换为 true
defineProps({
  disabled: [Number, Boolean]
})

// disabled 将被解析为空字符串 (disabled="")
defineProps({
  disabled: [String, Boolean]
})

// disabled 将被转换为 true
export default {
  props: {
    disabled: [Boolean, Number]
  }
}

// disabled 将被转换为 true
export default {
  props: {
    disabled: [Boolean, String]
  }
}

// disabled 将被转换为 true
export default {
  props: {
    disabled: [Number, Boolean]
  }
}

// disabled 将被解析为空字符串 (disabled="")
export default {
  props: {
    disabled: [String, Boolean]
  }
}

VueJs

2024-06-04

来源： Props | Vue.js

Vue 组件注册

一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。

全局注册

我们可以使用 Vue 应用实例的 .component() 方法，让组件在当前 Vue 应用中全局可用。

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

如果使用单文件组件，你可以注册被导入的 .vue 文件：

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

.component() 方法可以被链式调用：

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

全局注册的组件可以在此应用的任意组件的模板中使用：

<!-- 这在当前应用的任意组件中都可用 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

所有的子组件也可以使用全局注册的组件，这意味着这三个组件也都可以在彼此内部使用。

局部注册

全局注册虽然很方便，但有以下几个问题：

全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。
全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册：

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

如果没有使用 <script setup>，则需要使用 components 选项来显式注册：

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

局部注册需要使用 components 选项：

<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

对于每个 components 对象里的属性，它们的 key 名就是注册的组件名，而值就是相应组件的实现。上面的例子中使用的是 ES2015 的缩写语法，等价于：

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

请注意：局部注册的组件在后代组件中不可用。在这个例子中，ComponentA 注册后仅在当前组件可用，而在任何的子组件或更深层的子组件中都不可用。

组件名格式

在整个指引中，我们都使用 PascalCase 作为组件名的注册格式，这是因为：

PascalCase 是合法的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件都很容易，同时 IDE 也能提供较好的自动补全。
<PascalCase /> 在模板中更明显地表明了这是一个 Vue 组件，而不是原生 HTML 元素。同时也能够将 Vue 组件和自定义元素 (web components) 区分开来。

在单文件组件和内联字符串模板中，我们都推荐这样做。但是，PascalCase 的标签名在 DOM 内模板中是不可用的，详情参见 DOM 内模板解析注意事项。

为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent 为名注册的组件，在模板中可以通过 <MyComponent> 或 <my-component> 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。

VueJs

2024-06-04

来源：组件注册 | Vue.js

在.vue后缀的文件中，引入ts文件，使用’@/xxx/xxx/xxx’报错找不到相应类型声明

爱笑的男孩字 2022-08-06 14:37:30

解决办法：

需要在默认生成的配置文件中，添加如下设置。
第一步：找到文件工程目录下的tsconfig.json文件，在CompilerOptions中加上baseUrl和paths两个参数。

 {
 	"CompilerOptions": {
 		//解析非相对模块的基础地址，默认是当前目录
 		"baseUrl": "./",
 		//路径映射，相对于baseUrl
 		"paths": {
 			"@/*": ["./src/*"]
 		},
 	}
 }

第二步：找到文件工程目录下的vite.config.ts文件。加入如下内容
1、导入import path

import path from 'path'

2、defineConfig添加如下内容

resolve: {
	alias: {
		'@': path.resolve(__dirname, 'src')
	}
}

最后vite.config.ts文件全部内容如下：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    plugins: [vue()]
})

这时候就可以正常使用@符号啦，这里@符号是设置的src文件目录下，如有需要可以修改。

VueJs

2024-06-06

来源： vue3+vite+ts：使用@符号，实现定位在src目录下。(.vue文件无法使用@，import其他模块)_vue3 ts @符号-CSDN博客

Element UI与Element Plus：Vue框架下的UI组件库对比

新兰 2024.02.04 12:53

Element UI和Element Plus都是基于Vue的桌面端组件库，提供了丰富的UI组件，帮助开发者快速构建美观、功能强大的Web应用程序。它们各自具有独特的特点和优势，选择适合的组件库对于项目成功至关重要。本文将对比两者在功能、性能、兼容性等方面的区别，帮助你选择适合你的项目需求的组件库。

一、定义和框架区别

Element UI：一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库，基本不支持手机版。
Element Plus：基于Vue 3，面向设计师和开发者的组件库，组件布局考虑了手机版展示。
由此可见，Element Plus和Element UI的区别在于所使用的Vue版本不同。Vue 3相对于Vue 2进行了一些重大变更，因此在上手难度和使用方式上会有所不同。

二、性能和易用性

Element Plus是Element UI的升级版，在性能、可维护性、易用性等方面都有所提升。Element Plus还针对Vue 3的优化进行了一些性能上的改进，例如使用teleport而不是slot来实现组件的弹出框、弹出层等，减少组件的层级，提高渲染性能。

三、组件设计

Element Plus的组件设计更加轻量化和简洁化，去掉了一些不常用的组件，例如Image、Upload、Radio等，而新增了更符合当前开发趋势的组件，例如Tree、Avatar、Chip等。整个库的样式风格也更加简洁、扁平化，与当前流行的设计趋势相符。相比之下，Element UI的组件库相对较为完整，但可能存在一些过时或使用频率较低的组件。

四、兼容性

由于Element UI基本不支持手机版，因此在移动端兼容性方面可能存在一些问题。而Element Plus则考虑了手机版展示，因此在移动端兼容性方面更加优秀。如果你的项目需要开发移动端应用程序，Element Plus可能是一个更好的选择。

五、总结

总的来说，Element Plus和Element UI在很多核心组件上的设计差不多，例如Button、Input、Table等，但在一些细节上有所不同。如果你正在使用Vue 2.0开发桌面端应用程序，并且对移动端支持要求不高，那么Element UI可能是一个更好的选择。而如果你正在使用Vue 3开发应用程序，并且需要更好的性能和移动端支持，那么Element Plus可能更适合你的需求。不过需要注意的是，由于两者在代码风格、语法习惯等方面可能有所不同，因此在使用过程中可能需要开发者根据自己的实际情况进行调整和适应。

VueJs

2024-06-18

来源： Element UI与Element Plus：Vue框架下的UI组件库对比

Vue3生命周期图

VueJs

2024-08-29

来源： 30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）本文以前端面试官的角度出发，对 Vue - 掘金

v-show 与 v-if 有什么区别？

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。

所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

VueJs

2024-08-29

来源： 30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）本文以前端面试官的角度出发，对 Vue - 掘金

Vue 跨请求状态污染

SSR(服务端渲染)环境下，应用模块通常只在服务器启动时初始化一次。同一个应用模块会在多个服务器请求之间被复用，而我们的单例状态对象也一样。如果我们用单个用户特定的数据对共享的单例状态进行修改，那么这个状态可能会意外地泄露给另一个用户的请求。我们把这种情况称为跨请求状态污染。

VueJs

2024-12-23

来源：服务端渲染 (SSR) | Vue.js

beforeCreate ​

created ​

beforeMount ​

mounted ​

beforeUpdate ​

updated ​

beforeUnmount ​

unmounted ​

errorCaptured ​

renderTracked ​

renderTriggered ​

activated ​

deactivated ​

serverPrefetch ​

深度作用选择器

注意：动态生成的内容不受 scoped 影响

Props 声明 ​

传递 prop 的细节 ​

Prop 名字格式 ​

静态 vs. 动态 Props ​

传递不同的值类型 ​

Number ​

Boolean ​

Array ​

Object ​

使用一个对象绑定多个 prop ​

单向数据流 ​

更改对象 / 数组类型的 props ​

Prop 校验 ​

运行时类型检查 ​

可为空的类型 ​

Boolean 类型转换 ​

全局注册 ​

局部注册 ​

组件名格式 ​

v-show 与 v-if 有什么区别？

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

errorCaptured

renderTracked

renderTriggered

activated

deactivated

serverPrefetch

注意：动态生成的内容不受 `scoped` 影响

Props 声明

传递 prop 的细节

Prop 名字格式

静态 vs. 动态 Props

传递不同的值类型

Number

Boolean

Array

Object

使用一个对象绑定多个 prop

单向数据流

更改对象 / 数组类型的 props

Prop 校验

运行时类型检查

可为空的类型

Boolean 类型转换

全局注册

局部注册

组件名格式