vue3 常见api和用法createApp()：创建一个Vue应用程序实例。该函数返回一个应用程序实例，可以用来在DO

createApp()：创建一个Vue应用程序实例。该函数返回一个应用程序实例，可以用来在DOM元素上挂载组件、注册插件和配置应用程序。

javascriptCopy code
import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  template: `
    <div>
      <h1>{{ message }}</h1>
    </div>
  `
});

app.mount('#app');

ref()：创建一个响应式对象，可以用来引用DOM元素或任何其他值。ref() 返回一个对象，其中包含一个名为 value 的属性，该属性将始终反映 ref() 所引用的值的当前值。

javascriptCopy code
import { ref } from 'vue';

const count = ref(0);

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

// in template
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

reactive()：创建一个响应式对象，可以用来追踪和响应对象的变化。reactive() 会返回一个响应式代理对象，可以通过该代理对象访问原始对象的属性。

javascriptCopy code
import { reactive } from 'vue';

const person = reactive({
  firstName: 'John',
  lastName: 'Doe',
  age: 25
});

// in template
<template>
  <div>
    <p>{{ person.firstName }} {{ person.lastName }}, {{ person.age }}</p>
  </div>
</template>

computed()：创建一个计算属性，可以用来基于响应式数据计算衍生值。

javascriptCopy code
import { reactive, computed } from 'vue';

const person = reactive({
  firstName: 'John',
  lastName: 'Doe'
});

const fullName = computed(() => {
  return `${person.firstName} ${person.lastName}`;
});

// in template
<template>
  <div>
    <p>{{ fullName }}</p>
  </div>
</template>

watch()：创建一个观察者，可以用来监听响应式数据的变化并执行相应的操作。

javascriptCopy code
import { reactive, watch } from 'vue';

const person = reactive({
  firstName: 'John',
  lastName: 'Doe',
  age: 25
});

watch(() => {
  return person.age;
}, (newVal, oldVal) => {
  console.log(`Age changed from ${oldVal} to ${newVal}`);
});

// in template
<template>
  <div>
    <p>{{ person.age }}</p>
  </div>
</template>

watchEffect()：创建一个响应式副作用函数，可以用来响应性地追踪数据变化并执行相应的操作。

javascriptCopy code
import { reactive, watchEffect } from 'vue';

const person = reactive({
  firstName: 'John',
  lastName: 'Doe',
  age: 25
});

watchEffect(() => {
  console.log(`${person.firstName} ${person.lastName}, ${person.age}`);
});

// in template
<template>
  <div>
    <input v-model="person.firstName">
    <input v-model="person.lastName">
    <input v-model="person.age">
  </div>
</template>

provide() 和 inject()：提供了一种在组件树中传递数据的方式，使得父组件可以向子组件提供数据，而不需要显式地通过 props 传递。

javascriptCopy code
import { provide, inject } from 'vue';

const themeSymbol = Symbol();

const ThemeProvider = {
  setup() {
    provide(themeSymbol, 'dark');
  },
  template: `
    <div>
      <slot></slot>
    </div>
  `
};

const ThemeConsumer = {
  setup() {
    const theme = inject(themeSymbol);
    return { theme };
  },
  template: `
    <div>
      <p>Theme: {{ theme }}</p>
    </div>
  `
};

// in template
<template>
  <ThemeProvider>
    <ThemeConsumer />
  </ThemeProvider>
</template>

onMounted() 和 onUnmounted()：提供了在组件挂载和卸载时执行操作的方式。

javascriptCopy code
import { onMounted, onUnmounted } from 'vue';

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('Component mounted!');
    });

    onUnmounted(() => {
      console.log('Component unmounted!');
    });
  },
  template: `
    <div>
      <p>My Component</p>
    </div>
  `
};

// in template
<template>
  <MyComponent />
</template>

computed() 和 watch() 的新特性：Vue3增强了计算属性和观察者的功能，可以支持多个依赖和异步操作。

javascriptCopy code
import { reactive, computed, watch } from 'vue';

const person = reactive({
  firstName: 'John',
  lastName: 'Doe',
  age: 25
});

const fullName = computed(() => {
  console.log('computed');
  return `${person.firstName} ${person.lastName}`;
});

watch([() => person.firstName, () => person.lastName], (newValues, oldValues) => {
  console.log('watch');
  console.log(newValues, oldValues);
});

// in template
<template>
  <div>
    <input v-model="person.firstName">
    <input v-model="person.lastName">
    <input v-model="person.age">
  </div>
</template>

ref() 和 toRef()：ref() 可以用来创建一个响应式引用，而 toRef() 可以用来将一个响应式对象的属性转换成一个响应式引用。

javascriptCopy code
import { ref, toRef } from 'vue';

const count = ref(0);
const person = reactive({
  name: 'John',
  age: 25
});
const ageRef = toRef(person, 'age');

count.value++;
console.log(count.value); // output: 1

ageRef.value++;
console.log(person.age); // output: 26

readonly() 和 shallowReadonly()：readonly() 可以用来创建一个只读的响应式对象，而 shallowReadonly() 可以创建一个只读的响应式对象，但不会递归地使其属性只读。

javascriptCopy code
import { readonly, shallowReadonly } from 'vue';

const person = reactive({
  name: 'John',
  age: 25,
  address: {
    city: 'New York',
    country: 'USA'
  }
});

const readonlyPerson = readonly(person);
const shallowReadonlyPerson = shallowReadonly(person);

person.age++; // reactive
readonlyPerson.age++; // Error
shallowReadonlyPerson.address.city = 'Los Angeles'; // reactive
shallowReadonlyPerson.address = {}; // Error

markRaw()：可以将一个对象标记为“非响应式”的，使其不受响应式系统的追踪和更新。

javascriptCopy code
import { reactive, markRaw } from 'vue';

const person = reactive({
  name: 'John',
  age: 25,
  address: markRaw({
    city: 'New York',
    country: 'USA'
  })
});

person.address.city = 'Los Angeles'; // reactive
person.address = {}; // non-reactive

toRefs()：可以将一个响应式对象的所有属性转换成响应式引用对象。

javascriptCopy code
import { reactive, toRefs } from 'vue';

const person = reactive({
  name: 'John',
  age: 25
});

const refs = toRefs(person);

console.log(refs.name.value); // output: John
console.log(refs.age.value); // output: 25

watchEffect() 和 watch()：watchEffect() 可以用来监听响应式数据的变化并执行一个副作用函数，而 watch() 可以用来监听响应式数据的变化并执行一个回调函数。

javascriptCopy code
import { reactive, watchEffect, watch } from 'vue';

const person = reactive({
  name: 'John',
  age: 25
});

watchEffect(() => {
  console.log(`${person.name} is ${person.age} years old`);
});

watch(
  () => person.age,
  (newAge, oldAge) => {
    console.log(`Age changed from ${oldAge} to ${newAge}`);
  }
);

person.age++; // output: "John is 25 years old" "Age changed from 25 to 26"

computed()：可以用来创建一个计算属性，计算属性可以依赖响应式数据，并在其发生变化时自动更新。

javascriptCopy code
import { reactive, computed } from 'vue';

const person = reactive({
  name: 'John',
  age: 25
});

const ageCategory = computed(() => {
  if (person.age < 18) {
    return 'underage';
  } else if (person.age >= 18 && person.age <= 65) {
    return 'adult';
  } else {
    return 'senior';
  }
});

console.log(ageCategory.value); // output: "adult"

person.age = 70;
console.log(ageCategory.value); // output: "senior"

provide() 和 inject()：可以用来在父组件和子组件之间共享数据，provide() 可以在父组件中提供数据，而 inject() 可以在子组件中注入数据。

javascriptCopy code
import { provide, inject } from 'vue';

const ThemeSymbol = Symbol();

const App = {
  setup() {
    const theme = 'light';
    provide(ThemeSymbol, theme);
  }
};

const Child = {
  setup() {
    const theme = inject(ThemeSymbol);
    console.log(`The current theme is ${theme}`);
  }
};

defineAsyncComponent()：可以用来异步地加载组件，这对于延迟加载一些较大的组件非常有用。

javascriptCopy code
import { defineAsyncComponent } from 'vue';

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

createApp() 和 mount()：createApp() 可以用来创建一个Vue应用程序实例，而 mount() 可以用来将Vue应用程序实例挂载到一个HTML元素上。

javascriptCopy code
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

新建了一个前端技术交流群

也可以直接加微信13267217053直接拉进群,有好资料免费分享哦