vue3没空学了，那就过一遍小知识点

前言

Vue3 带来了很多新特性和改进，如果你是学不动了，没空学了，又或者是有些同学现在根本还没机会用上vue3，那就先把下面这些简单的先过一遍，后续在工作中再慢慢去拓宽和深入vue3

1. v-model 双向绑定

在 Vue 3 中， v-model 的升级使用，使用了新的语法糖，可以更加直观的实现双向绑定功能。

<!-- 简单的 Input 组件 -->
<template>
  <input v-model="modelValue" />
</template>

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

export default defineComponent({
  props: {
    modelValue: String,
  },
  emits: ['update:modelValue'],
});
</script>

2. teleport 组件传送门

teleport 组件可以让我们将组件渲染到指定的目标 DOM 节点上，便于在布局上灵活使用。可以使用 teleport 将某个组件渲染到指定元素的父组件之前或之后。

<template>
  <teleport to="body">
    <div>我会渲染在 body 中</div>
  </teleport>
</template>

3. watchEffect 监听响应式变量

与 watch 监听不同，watchEffect 监听响应变量的改变并直接执行回调函数。如果回调函数中用到了响应式变量，下次变化时会自动触发回调函数。

<template>
  <div>{{value}}</div>
</template>

<script>
import { defineComponent, reactive, watchEffect } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      value: 0,
    });

    // 实时更新 value
    watchEffect(() => {
      console.log(state.value);
    });

    return {
      value: state.value,
    };
  },
});
</script>

4. createApp 创建实例

与 Vue 2 中的 new Vue 不同，Vue 3 中使用 createApp 函数创建实例。该函数返回一个应用实例，可以通过 .mount() 方法将其挂载到指定的 DOM 元素上。

<div id="app"></div>

<script>
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
</script>

5. Composition API

Vue 3 中新增了 Composition API，它使得组件逻辑可以更好的封装和管理。我们可以使用 setup 函数来定义数据和方法，可以更容易地重用相同逻辑的代码段。此外，使用 Composition API 还可以更好地管理响应式数据。

<template>
  <div>{{value}}</div>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      value: 0,
    });

    const increment = () => {
      state.value++;
    };

    return {
      value: state.value,
      increment,
    };
  },
});
</script>

6. provide 和 inject 属性

在 Vue 3 中，我们可以使用 provide 和 inject 属性在组件间传递数据。provide 允许更高级别的组件提供数据，子组件可以使用 inject 从父组件中获取数据。

<template>
  <div>{{text}}</div>
  <MyComponent />
</template>

<script>
import { defineComponent, provide } from 'vue';
import MyComponent from './MyComponent.vue';

export default defineComponent({
  setup() {
    const text = 'Hello World';
    provide('text', text);

    return {
      text,
    };
  },
  components: {
    MyComponent,
  }
});
</script>

<!-- MyComponent.vue -->
<template>
  <div>{{displayText}}</div>
</template>

<script>
import { defineComponent, inject } from 'vue';

export default defineComponent({
  setup() {
    const text = inject('text');
    const displayText = text.toUpperCase();

    return {
      displayText,
    };
  },
});
</script>

7. ref 属性

Vue 3 通过 ref 属性提供了对元素和组件实例的访问。ref 可以用于获取 HTML 元素，也可以用于在组件之间传递非响应式数据。

<template>
  <div ref="box"></div>
</template>

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

export default defineComponent({
  mounted() {
    // 使用 ref 获取 DOM 元素
    console.log(this.$refs.box);
  },
});
</script>

8. 直接访问响应式数据

Vue 3 提供了另一种直接访问响应式数据的方式，即在模板中使用 {{ $data.x }} 代替 {{ x }}。

<template>
  <div>{{ $data.value }}</div>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      value: 0,
      message: 'Hello World',
    });

    return {
      ...state,
    };
  },
});
</script>

9. <script setup> 语法糖

<script setup> 是 Vue 3 的语法糖，可以减少冗余代码，更好地组织组件的逻辑。使用 <script setup>，我们可以将组件的数据初始化和函数声明放在一起，并将它们暴露给模板使用。

<template>
  <div>{{ value }}</div>
</template>

<script setup>
import { reactive } from 'vue';

const state = reactive({
  value: 0,
  message: 'Hello World',
});

const increment = () => {
  state.value += 1;
};

export { state, increment };
</script>

10. <slot> 和 <template v-slot> 的新语法

在 Vue 3 中，<slot> 标签和 <template v-slot> 可以使用更简单的语法进行定义，包括使用 # 符号实现。

<!-- 使用 #default 实现匿名插槽 -->
<my-component>
  #default
  <div>插槽内容</div>
</my-component>

<!-- 使用 #name 指定名称的插槽 -->
<my-component>
  #header
  <div>Header Content</div>
  #default
  <div>Main Content</div>
  #footer
  <div>Footer Content</div>
</my-component>

<!-- 使用 <template> 和 <slot> 组合实现多个插槽 -->
<my-component>
  <template #header>
    <div>Header Content</div>
  </template>
  <template #default>
    <div>Main Content</div>
  </template>
  <template #footer>
    <div>Footer Content</div>
  </template>
</my-component>

11. 使用 Fragment 进行组件包裹

在 Vue 3 中，我们可以使用 Fragment 来包裹组件，Fragment 是空元素，它可以包含任意的子节点，同时不会在输出中渲染。

<template>
  <fragment>
    <div>Child 1</div>
    <div>Child 2</div>
  </fragment>
</template>

12. 使用 readonly 定义只读响应式数据

在 Vue 3 中，可以通过 readonly 定义只读响应式数据。这样可以确保数据不被变异，并且可以提高性能。

<template>
  <div>{{ readOnlyValue }}</div>
</template>

<script>
import { defineComponent, readonly, reactive } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      value: 0,
    });

    const readOnlyValue = readonly(state);

    return {
      readOnlyValue,
    };
  },
});
</script>

13. 使用 watch 监听属性变化

Vue 3 中的 watch 函数与 Vue 2 中的有所不同。与 Vue 2 中的 watch 函数不同，Vue 3 中的 watch 函数接受一个可选的选项对象，并且在监听期间可以访问先前值和当前值。

<template>
  <div>{{ evenValue }}</div>
</template>

<script>
import { defineComponent, watch } from 'vue';

export default defineComponent({
  setup() {
    let value = 0;

    // 监听 value 变化
    const evenValue = watch(() => {
      return value;
    }, (newValue, oldValue) => {
      console.log(`old value is ${oldValue}, new value is ${newValue}`);
    }, {
      immediate: true,
      deep: true,
    });

    setInterval(() => {
      value++;
    }, 1000);

    return {
      evenValue,
    };
  },
});
</script>

总结

我自己平时工作的时候用vue3的机会并不多，对于这种平时用得比较少的，最好的方式就是自己总结一篇笔记，当自己后面翻到这篇笔记的时候就能快速回归vue3的一些使用，以便应用

本文正在参加「金石计划」