首页

Appearance

组件封装 ​

v-model ​

  1. 使用 v-model 进行双向数据绑定：在 Vue 3 中，你可以在自定义组件上使用 v-model，并且可以使用多个 v-model。这使得你可以创建可复用的控件，如输入框、复选框等。

    html
    <custom-input
  v-model:title="title"
  v-model:description="description"
></custom-input>

provide 和 inject ​

  1. 使用 provide 和 inject 进行依赖注入：provide 和 inject 是 Vue 3 中新引入的两个函数，它们可以在父组件中创建一个值，并在任何子组件中使用。这对于跨组件共享数据非常有用。

    javascript
    import { provide, inject } from 'vue'

// 在父组件中
setup() {
  provide('theme', 'dark')
}

// 在子组件中
setup() {
  const theme = inject('theme')
}

ref 和 onMounted ​

  1. 使用 ref 和 onMounted 进行 DOM 操作：在 Vue 3 中，你可以使用 ref 创建一个引用，然后在 onMounted 生命周期钩子中，当 DOM 已经挂载时，进行操作。

    javascript
    import { ref, onMounted } from 'vue'

setup() {
  const divRef = ref(null)

  onMounted(() => {
    console.log(divRef.value) // logs the DOM element
  })

  return {
    divRef
  }
}

reactive ​

  1. 使用 reactive 进行复杂数据响应式处理：Vue 3 中的 reactive 函数允许我们创建一个响应式的对象。这对于处理复杂的数据结构非常有用。

    javascript
    import { reactive } from 'vue'

setup() {
  const state = reactive({
    count: 0,
    title: 'Hello Vue 3'
  })
}

watch 和 watchEffect ​

  1. 使用 watch 和 watchEffect 进行响应式数据监听：Vue 3 提供了 watch 和 watchEffect 函数，让我们能够观察和响应 Vue 组件中的动态变化。

    javascript
    import { ref, watch, watchEffect } from 'vue'

setup() {
  const count = ref(0)

  watch(count, (newValue, oldValue) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`)
  })

  watchEffect(() => {
    console.log(`Count is now ${count.value}`)
  })
}

computed ​

  1. 使用 computed 创建计算属性：Vue 3 的 computed 函数允许我们创建一个计算属性，它将根据依赖的响应式数据动态计算其值。

    javascript
    import { ref, computed } from 'vue'

setup() {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
}

emits ​

  1. 使用 emits 选项定义组件可以触发的事件：Vue 3 允许你在组件选项中使用 emits 选项来定义组件可以触发的事件。这对于文档和类型检查非常有用。

    javascript
    export default {
  emits: ["update", "close"],
};

defineProps 和 defineEmits ​

  1. 使用 defineProps 和 defineEmits 进行类型安全的属性和事件定义：在 script setup 中，你可以使用 defineProps 和 defineEmits 函数来定义组件的属性和事件，这对于 TypeScript 用户来说可以提供类型安全。

    html
    <script setup lang="ts">
  import { defineProps, defineEmits } from "vue";

  const props = defineProps({
    msg: String,
  });

  const emits = defineEmits(["update"]);
</script>

defineComponent 和 defineAsyncComponent ​

  1. 使用 defineComponent 和 defineAsyncComponent 创建组件：Vue 3 提供了 defineComponent 和 defineAsyncComponent 函数，让我们能够更方便地创建和使用组件。

    javascript
    import { defineComponent, defineAsyncComponent } from "vue";

const MyComponent = defineComponent({
  // component options
});

const MyAsyncComponent = defineAsyncComponent(() =>
  import("./MyComponent.vue")
);

nextTick ​

  1. 使用 nextTick 进行 DOM 更新后的操作：有时候，你可能需要在 DOM 更新后立即进行一些操作。此时，你可以使用 Vue 3 的 nextTick 函数。

    javascript
    import { nextTick } from 'vue'

async setup() {
  // ...some data changes

  await nextTick()

  // DOM has been updated
}

v-once ​

  1. 使用 v-once 进行静态内容优化：如果你的组件有一部分内容是静态的，不会改变，你可以使用 v-once 指令来优化它。这样 Vue 就不会为这部分内容创建响应式依赖，可以提高性能。

    html
    <div v-once>
  <!-- This part will not be reactive -->
</div>

v-memo ​

  1. 使用 v-memo 进行列表渲染优化：Vue 3.2 引入了 v-memo 指令，可以用于优化列表渲染。如果列表项的内容依赖于某些特定的数据，当这些数据没有改变时，Vue 就不会重新渲染该列表项。

    html
    <div v-for="item in items" :key="item.id" v-memo="[item.value]">
  <!-- This part will not be re-rendered if item.value didn't change -->
</div>

v-is ​

  1. 使用 v-is 动态组件：在 Vue 3 中，你可以使用 v-is 指令来动态地渲染不同的组件。

    html
    <component v-is="dynamicComponent" />
    javascript
    import { ref } from 'vue'

setup() {
  const dynamicComponent = ref('MyComponent')

  return {
    dynamicComponent
  }
}

use 函数（Hook） ​

  1. 使用 use 函数创建可复用的逻辑（Hook）：在 Vue 3 中，你可以创建自定义的 use 函数，这是一种组织和复用组件逻辑的方式。

    javascript
    function useCount() {
  const count = ref(0)

  function increment() {
    count.value++
  }

  return {
    count,
    increment
  }
}

setup() {
  const { count, increment } = useCount()
}

teleport ​

  1. 使用 teleport 进行内容传送：teleport 是 Vue 3 中的一个新特性，它允许你在 DOM 结构中的任何位置渲染组件的一部分，而不仅仅是在它的父组件内。这对于创建模态框、通知、弹出菜单等组件非常有用。

    html
    <teleport to="#modal">
  <div>This will be rendered inside #modal element</div>
</teleport>

Suspense ​

  1. 使用 Suspense 组件进行异步依赖处理：Vue 3 引入了 Suspense 组件，可以用于处理异步组件的加载状态。你可以为 Suspense 提供一个 fallback 插槽，当异步组件正在加载时，将显示该插槽的内容。

    html
    <Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

hancenter808@outlook.com

Copyright © 2024 Hanwei