10个Vue3中的编程实用技巧分享

import { ref, reactive } from 'vue';

// 使用 ref 管理基本类型数据
const count = ref(0);
console.log(count.value); // 0

// 使用 reactive 管理复杂对象
const state = reactive({
  name: 'Vue 3',
  version: '3.2.0',
});
console.log(state.name); // Vue 3

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const doubleCount = computed(() => count.value * 2);

    function increment() {
      count.value++;
    }

    return {
      count,
      doubleCount,
      increment,
    };
  },
};

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

const count = ref(0);

// 使用 watch 监听 count 的变化
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

// 使用 watchEffect 自动追踪依赖
watchEffect(() => {
  console.log(`count is now ${count.value}`);
});

// 父组件
import { provide, ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello from parent');
    provide('message', message);
  },
};

// 子组件
import { inject } from 'vue';

​​​​​​​export default {
  setup() {
    const message = inject('message');
    return { message };
  },
};

<template>
  <button @click="showModal = true">Open Modal</button>
  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <p>This is a modal!</p>
      <button @click="showModal = false">Close</button>
    </div>
  </Teleport>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showModal = ref(false);
    return { showModal };
  },
};
</script>

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

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
);

export default {
  components: {
    AsyncComponent,
  },
};
</script>

<template>
  <CustomInput v-model:firstName="firstName" v-model:lastName="lastName" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');
    return { firstName, lastName };
  },
};
</script>

<template>
  <input :value="firstName" @input="$emit('update:firstName', $event.target.value)" />
  <input :value="lastName" @input="$emit('update:lastName', $event.target.value)" />
</template>

<script>
export default {
  props: ['firstName', 'lastName'],
};
</script>

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    return { count };
  },
});

<template>
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</template>

import { directive } from 'vue';

const vFocus = {
  mounted(el) {
    el.focus();
  },
};

export default {
  directives: {
    focus: vFocus,
  },
};

<input v-focus />