Vue3语法大全

Vue3 引入了许多新的特性和语法糖，以下是一些常见的 Vue3 语法特性的示例：

1. Composition API (组合式 API):

<template>
  <div>{{ count }}</div>
</template>
 
<script>
import { ref, reactive, computed } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
    const state = reactive({ count: 0 });
    const doubleCount = computed(() => state.count * 2);
 
    // 返回需要在模板中使用的属性和方法
    return {
      count,
      doubleCount
    };
  }
}
</script>

2. Teleport (传送门):

<teleport to="body">
  <div>这个 div 会被插入到 body 标签中</div>
</teleport>

3. Fragments (片段):

<template>
  <div>
    Part 1
    <span>Part 2</span>
  </div>
</template>

4. Emits Composition (发射):

import { defineComponent } from 'vue';
 
export default defineComponent({
  emits: ['update', 'delete'],
  setup(props, { emit }) {
    function updateItem() {
      emit('update', newValue);
    }
 
    function deleteItem() {
      emit('delete', itemId);
    }
 
    return { updateItem, deleteItem };
  }
});

5. Custom Render (自定义渲染):

import { h, render } from 'vue';
 
render(
  h('div', 'Hello World!'),
  document.body
);

6. Script Setup 语法糖 (更简洁的组件定义方式):

<template>
  <button @click="increment">{{ count }}</button>
</template>
 
<script setup>
import { ref } from 'vue'
 
const count = ref(0)
function increment() {
  count.value++
}
</script>

7. Data Option Composition (数据选项组合):

import { reactive } from 'vue';
 
export default {
  data() {
    return {
      localState: 'initial state'
    }
  },
  setup() {
    const state = reactive({
      localState: 'new state'
    });
 
    // 返回的对象将会与 data 选项合并
    return state;
  }
}

8. Template Refs (模板引用):

<template>
  <div ref="divRef">Hello</div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const divRef = ref(null);
 
    onMounted(() => {
      console.log(divRef.value); // DOM 元素
    });
 
    return { divRef };
  }
}
</script>

这些特性和示例代码提供了 Vue3 的一个概览，展示了如何使用 Vue3 的新特性来编写更加现代和灵活的代码。