vue3一些高阶用法

1. ref 和 reactive

首先，让我们从 Vue3 最基础也是最常用的两个方法开始：ref 和 reactive。它们是响应式基础。

ref

ref 用于定义一个响应式的数据对象。它适用于单个基本类型或对象的场景。

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

为什么要使用 ref？

你可能会好奇：为什么我们需要使用带有 .value 的 ref，而不是普通的变量？为了解释这一点，我们需要简单地讨论一下 Vue 的响应式系统是如何工作的。

当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。

在标准的 JavaScript 中，检测普通变量的访问或修改是行不通的。然而，我们可以通过 getter 和 setter 方法来拦截对象属性的 get 和 set 操作。

该 .value 属性给予了 Vue 一个机会来检测 ref 何时被访问或修改。在其内部，Vue 在它的 getter 中执行追踪，在它的 setter 中执行触发。从概念上讲，你可以将 ref 看作是一个像这样的对象：

// 伪代码，不是真正的实现
const myRef = {
  _value: 0,
  get value() {
    track()
    return this._value
  },
  set value(newValue) {
    this._value = newValue
    trigger()
  }
}

另一个 ref 的好处是，与普通变量不同，你可以将 ref 传递给函数，同时保留对最新值和响应式连接的访问。当将复杂的逻辑重构为可重用的代码时，这将非常有用。

reactive

reactive 用于定义一个响应式的复杂对象。适用于包含多个属性的对象。

<template>
<button @click="state.count++">
  {{ state.count }}
</button>
</template>
<script setup>
import { reactive } from 'vue';

const state = reactive({ count: 0 })
</script>

2. toRefs

当我们使用 reactive 创建了一个复杂对象后，有时候需要将其解构为多个响应式的引用，这时候 toRefs 就派上用场了。

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      name: 'Vue3'
    });

    return {
      ...toRefs(state)
    };
  }
};

3. watch 和 watchEffect

watch

watch 用于监听特定数据的变化并执行相应的回调函数。它可以用来监控一个或多个响应式数据。

import { ref, watch } from 'vue';

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

    watch(count, (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    });

    return {
      count
    };
  }
};

watchEffect

watchEffect 更为自动化，它会立即执行一次并响应任何依赖的变化。

import { ref, watchEffect } from 'vue';

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

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

    return {
      count
    };
  }
};

4. computed

computed 用于定义计算属性，它会根据依赖的变化自动更新。

import { ref, computed } from 'vue';

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

    return {
      count,
      doubleCount
    };
  }
};

5. provide 和 inject

provide

provide 用于向下传递数据，通常在父组件中使用。

import { provide } from 'vue';

export default {
  setup() {
    provide('message', 'Hello from parent');

    return {};
  }
};

inject

inject 用于在子组件中接收数据。

import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');

    return {
      message
    };
  }
};

6. shallowRef 和 shallowReactive

shallowRef

shallowRef 仅对对象的第一层进行响应式处理。

import { shallowRef } from 'vue';

export default {
  setup() {
    const state = shallowRef({
      count: 0
    });

    return {
      state
    };
  }
};

shallowReactive

shallowReactive 也是仅对对象的第一层进行响应式处理。

import { shallowReactive } from 'vue';

export default {
  setup() {
    const state = shallowReactive({
      count: 0
    });

    return {
      state
    };
  }
};

7. customRef

customRef 允许你自定义对某个响应式对象的追踪逻辑。

import { customRef } from 'vue';

function useDebouncedRef(value, delay = 200) {
  let timeout;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newValue) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          value = newValue;
          trigger();
        }, delay);
      }
    };
  });
}

export default {
  setup() {
    const debounced = useDebouncedRef(0);

    return {
      debounced
    };
  }
};

8. markRaw 和 isRef

markRaw

markRaw 用于标记一个对象永远不会成为响应式的。

import { markRaw } from 'vue';

const rawObject = markRaw({
  count: 0
});

export default {
  setup() {
    return {
      rawObject
    };
  }
};

isRef

isRef 用于检查一个对象是否为 ref。

import { ref, isRef } from 'vue';

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

    console.log(isRef(count)); // true

    return {
      count
    };
  }
};

9. getCurrentInstance

getCurrentInstance 可以用来获取组件实例，对于调试非常有用。

import { getCurrentInstance, onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      const instance = getCurrentInstance();
      console.log(instance);
    });

    return {};
  }
};

10. defineProps 和 defineEmits

defineProps

defineProps 用于在组合式 API 中定义接收的属性。

import { defineProps } from 'vue';

export default {
  setup() {
    const props = defineProps({
      message: String
    });

    return {
      props
    };
  }
};

defineEmits

defineEmits 用于在组合式 API 中定义发出的事件。

import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['update']);

    const updateMessage = () => {
      emit('update', 'New message');
    };

    return {
      updateMessage
    };
  }
};

11. teleport

teleport 允许你将内容渲染到指定的 DOM 元素中。

<template>
  <teleport to="#teleport-target">
    <p>This will be teleported to another part of the DOM.</p>
  </teleport>
</template>

<script>
export default {
  setup() {
    return {};
  }
};
</script>

12. Suspense

Suspense 用于处理异步组件的加载状态。

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

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

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

export default {
  components: {
    AsyncComponent
  },
  setup() {
    return {};
  }
};
</script>

13. v-model 的修饰符支持

Vue3 中 v-model 支持多个修饰符，比如 lazy, number, 和 trim。

<template>
  <input v-model.lazy="text" />
</template>

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

export default {
  setup() {
    const text = ref('');

    return {
      text
    };
  }
};
</script>

14. nextTick 函数

nextTick 用于在下次 DOM 更新循环结束后执行回调。

import { ref, nextTick } from 'vue';

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

    const increment = () => {
      count.value++;
      nextTick(() => {
        console.log('DOM updated');
      });
    };

    return {
      count,
      increment
    };
  }
};

15. defineAsyncComponent

defineAsyncComponent 用于定义异步组件。

import { defineAsyncComponent } from 'vue';

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

export default {
  components: {
    AsyncComponent
  },
  setup() {
    return {};
  }
};

16. defineCustomElement

defineCustomElement` 用于定义自定义元素。

import { defineCustomElement } from 'vue';

const MyCustomElement = defineCustomElement({
  props: {
    message: String
  },
  template: `<p>{{ message }}</p>`
});

customElements.define('my-custom-element', MyCustomElement);

17. teleport 和 Fragment 的简写

在 Vue3 中，teleport 和 Fragment 的简写方式更加简洁。

<template>
  <Teleport to="#teleport-target">
    <p>Teleported content</p>
  </Teleport>
</template>

<script>
export default {
  setup() {
    return {};
  }
};
</script>

总结

通过这篇文章，够帮助你在开发中更加得心应手。