Wie Sie schnell mit vue3 beginnen können, lernen Sie diese APIs kennen!

Wie kann ich schnell mit vue3 beginnen? In diesem Artikel werden einige APIs vorgestellt, mit denen Sie direkt mit vue3 beginnen können. Ich hoffe, dass es für alle hilfreich ist.

Wer Projekte mit vue2 entwickelt hat, möchte schnell mit vue3 beginnen. Es reicht aus, sich mit ein paar APIs vertraut zu machen. Andere Funktionen werden im Laufe der Verwendung von vue3 langsam verstanden. Jeder, der einige API-Prinzipien studiert, nachdem er sich mit deren Verwendung vertraut gemacht hat, wird langsam in der Lage sein, vue3 zu beherrschen.

Und bei der Verwendung von vue3 in Kombination mit ts ist der Anteil von ts im Entwicklungsprozess nicht so groß. Wenn Sie die Grundlagen von ts kennen, reicht dies für die Entwicklung aus. [Verwandte Empfehlungen: vuejs-Video-Tutorial]

Globale API und Anwendungs-API

Ein neues Konzept von vue3, das eine Anwendungsinstanz zurückgibt, die Anwendungskontext bereitstellt, und den gesamten von der Anwendungsinstanz bereitgestellten Komponentenbaum gemeinsam nutzt Gleicher Kontext:

const app = createApp(App);
app.use(store).use(router).mount("#app");

vue2:

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

Dann sind die APIs, die früher Vue verwendeten, zu dieser Anwendungsinstanz-App geworden.:

vue2	vue3
Vue.component	App. Komponente
app.config	app.config
app.directive	app.directive
app.mixin	app.mixin
app.use	app.use

Andere APIs wie nextTick, h usw. werden direkt aus der Vue-Struktur verwendet:

import { createApp, h, nextTick } from 'vue'

composition API

tips

• vue3 verwendet diese
• vue3-Komponente nicht mehr erfordert nicht ein Root-Tag, aber es wird eine Warnung angezeigt. Überflüssige Nicht-Requisiten-Attribute. Es wird empfohlen, Einzeldateikomponenten zu verwenden diese Funktion als Einstiegspunkt. Empfängt zwei Parameter props und context. Die Funktion wird vor beforeCreate und erstellt ausgeführt. Man kann sagen, dass sie beforeCreate und erstellt ersetzt und zum neuen Lebenszyklus wird. Die neue Kompositions-API wird in die Setup-Funktion geschrieben.
• props sind die Requisiten von vue2, und der Kontext stellt Attrs, Slots, Emit usw. bereit. Durch die Rückgabe eines Objekts werden die Reaktionsdaten der Vorlage ausgesetzt, was den Daten von vue2 entspricht. Der Unterschied besteht darin, dass die Funktion auch auf diese Weise der Vorlage ausgesetzt wird:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1 @click="test">{{ isRef }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup(props) {
    console.log(props.msg);
    let isRef = ref("is ref");
    const test = () => {
      console.log(isRef.value);
    };
    return {
      isRef,
      test,
    };
  },
});
</script>

Einzelne Dateikomponente

Vue3 Bietet auch eine einzelne Dateikomponente (empfohlen). Fügen Sie Setup zum Skript hinzu, und der darin enthaltene Code wird in die Setup-Funktion kompiliert. Ein paar wichtige Punkte:

Die Bindung der obersten Ebene wird der Vorlage zugänglich gemacht.

Die deklarierte Bindung der obersten Ebene (einschließlich Variablen, Funktionsdeklarationen und durch den Import eingeführter Inhalte) kann direkt in der Vorlage verwendet werden Reaktive Daten, Komponenten usw. können auch direkt verwendet werden:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1 @click="test">{{ isRef }}</h1>
  </div>
<MyComponent />
</template>

<script lang="ts" setup>
import MyComponent from &#39;./MyComponent.vue&#39;
import { ref } from "vue";
const msg = "msg";
const isRef = ref("");
function test() {
  console.log(isRef.value);
}
</script>

Bei Verwendung einzelner Dateikomponenten muss die Verwendung einiger Attribute auch geändert werden. Natürlich gibt es auch andere alternative APIs:

Eigenschaften

entsprechende

props und emitsdefineProps und defineEmitsref oder $parentdefineExposeslots und attrsuseSlots und useAttrs()

ref

接受一个内部值并返回一个响应式且可变的 ref 对象，在setup函数内部访问ref函数需要加.value， 如果要加类型，要用泛型，不加则会类型推论，也可以不给初始值，则是any，且是undefined：

const ref1 = ref(1);
const ref2 = ref<number>(2);
const ref3 = ref1.value;//不是响应式，相当于变量
const ref4 = ref();//refs.value是undefined
ref2.value = 5;//赋值 读取都要.value

一般来说，ref只会赋值基础数据类型和数组，也可以泛型联合类型 如果将对象分配为ref值，则它将被reactive函数处理为深层的响应式对象：

//不建议，内部也是reactive处理
const ref1 = ref({
  a: 10,
});

//不确定类型
const ref3 = ref<string | number>();
ref3.value = 1;
ref3.value = "";

//数组对象，ts类型声明，用泛型
type Obj1 = { c: string };
type Obj2 = {
  b: string;
  c: Obj1[];
};
const ref2 = ref<Obj2[]>([
  {
    b: "",
    c: [{ c: "" }],
  },
]);

reactive

用来声明响应式的对象，类型通过泛型添加：

type Obj = {
  a: number;
  b: string;
};
let obj = reactive<Obj>({
  a: 10,
  b: "",
});
let state = reactive({
  a: 10,
  b: "",
});

reactive将会解包所有深层的 refs，同时维持ref的响应性， 将ref分配给reactive的property时，ref也会被自动解包。 简单说就是ref的值和reactive的值响应式了

const count = ref(1)
const obj = reactive({ count })

// ref 会被解包
console.log(obj.count === count.value) // true

// 它会更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2

// 它也会更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

//跟上面一样效果
const count = ref(1)
const obj = reactive({})
obj.count = count
console.log(obj.count) // 1
console.log(obj.count === count.value) // true

toRef

为源响应式对象上的某个property新创建一个ref，也就是reactive创建的才可以, 会保持对其源 property 的响应式连接：

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

toRefs

将响应式对象转换为普通对象，其中结果对象的每个property都是指向原始对象相应property的ref：

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:
{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

toRef和toRefs在对一些响应式对象结构展开会很有用，可以有用的时候看看。

watch

watch接收两个参数，第一个参数可以是有return的函数，也可以是一个ref, 第二个参数则跟vue2相同的函数，并且watch可以很多个：

//一般ref不用这种方式
let count = ref(0);
watch(
  () => count.value,
  (val, old) => {
    console.log(old, val);
  }
);

//单个ref推荐
watch(count, (val, old) => {
  console.log(old, val);
});

//监听reactive对象
let state = reactive({ count: 0 });
//函数参数必须具体到某个值，如果是() => state无效，或者加上{ deep: true }
watch(
  () => state.count,
  (val, old) => {
    console.log(old, val);
  }
);

//加上{ deep: true }
watch(
  () => state,
  (val, old) => {
    console.log(old, val);
  },
  { deep: true }
);

//监听整个对象，新旧的值都相同，或者用lodash.cloneDeep进行深拷贝
//state改成() => _.cloneDeep(state)
watch(state, (val, old) => {
  console.log(old.count, val.count);
});

也可以同时监听多个，两个参数分别用数组，个人还是建议单个：

const state = reactive({ count: 1 });
const count = ref(0);
// 监听一个数组
watch(
  [() => state.count, count],
  ([newState, newCount], [oldState, oldCount]) => {
    console.log("new:", newState, newCount);
    console.log("old:", oldState, oldCount);
  }
);

官网一直提到惰性，其实就是是否加immediate: true，加了初始化就会执行。

watchEffect

它"立即执行"传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数：

const state = reactive({ count: 1 });
const count = ref(0);

watchEffect(() => {
  if (state.count > 3) {
    count.value++;
  }
});
watchEffect(() => console.log(count.value));

至于watch和watchEffect共享停止侦听，清除副作用 (相应地 onInvalidate 会作为回调的第三个参数传入)、 副作用刷新时机和侦听器调试行为后面要仔细研究一下。

computed

从vue2开始，就很多人分不清什么时候用computed什么时候用watch，computed主要是用来声明 有两个及以上的依赖的数据，也就是说一个变量是根据多个数据进行判断的，用computed，单个的用watch。 至于语法的不同就不多说了，vue3的computed常用语法是一个带有return的函数，也可以同时存在多个：

let count = ref(0);
let page = ref(0);
let pg = computed(() => {
  return count.value + page.value;
});

要注意，computed声明的变量（pg）是不能直接去修改的（只读），跟vue2一样也有get、set函数（可读可写）。

defineProps、defineEmits

在单文件组件中必须使用defineProps和defineEmits API来声明props和emits，可以算是语法糖。 父组件还是跟原来一样传值，子组件接收：

//父组件
<template>
  <div class="home">
    <input v-model="msg" />
    <HelloWorld :msg="msg" @change="change" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
let msg = ref("is parent");
const change = (val: string) => {
  msg.value = val;
};
</script>

//子组件
<template>
  <div>{{ msg }}</div>
  <button @click="change">emit</button>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
  msg: String,
});
console.log(props.msg);

const emit = defineEmits(["change"]);
const change = () => {
  emit("change", "is son");
};
</script>

//设置默认值
defineProps({
  msg: {
    type: Number,
    default: 100,
  },
});

template可以直接使用msg，要调用的话就得props.msg。

withDefaults

defineProps只能限制类型，没有提供默认值（这边应该是限定用ts的接口才没有默认值）。为了解决这个问题，提供了 withDefaults 编译器宏：

type Porps = {
  msg: string;
};
const props = withDefaults(defineProps<Porps>(), {
  msg: "default",
});

withDefaults接收两个参数，第一个参数是defineProps加props字段的泛型，第二个字段是默认值，也可以不设置。

也可以监听props：

watch(
  () => props.msg,
  (val) => {
    console.log(val);
  }
);

this.$refs

vue2很多情况还是需要用到这个api，vue3中比较特别， 为了获得对模板内元素或组件实例的引用，我们可以像往常一样声明ref， 在渲染上下文中暴露root，并通过ref="root"，将其绑定到 div 作为其 ref。 在虚拟DOM补丁算法中，如果 VNode 的 ref 键对应于渲染上下文中的 ref， 则VNode的相应元素或组件实例将被分配给该ref的值。 这是在虚拟 DOM 挂载/打补丁过程中执行的，因此模板引用只会在初始渲染之后获得赋值。

<button ref="testRef">testRef</button>

let testRef = ref(null);
onMounted(() => {
  // DOM 元素将在初始渲染后分配给 ref
  console.log(testRef.value); // <button>testRef</button>
});

nextTick

跟vue2一样的使用：

nextTick(() => {
  console.log(testRef.value);
});

也可以跟官网提供的一样用async的函数await：

let testRef = ref(null);
const nextTickFn = async () => {
  await nextTick();
  console.log(testRef.value);
};
nextTickFn();

defineExpose

vue2有时候会用this.$refs调用子组件的函数或者变量， 单文件组件是默认关闭的，所以单文件组件要用defineExpose编译器宏暴露出去：

//父组件
<template>
  <div class="home">
    <HelloWorld ref="sonRef" />
  </div>
</template>

<script lang="ts" setup>
import { nextTick, ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
let sonRef = ref();
nextTick(() => {
  sonRef.value.sonFn();
  console.log(sonRef.value.sonRef);
});
</script>

//子组件
let sonRef = ref("is son");
const sonFn = () => {
  console.log("is son fn");
};
defineExpose({ sonFn, sonRef });

vue2的this.$parent在单文件组件中，自己是实现了，但是官方没有直接给出代码：

//父组件
const parentRef = ref("is parent ref");
const parentFn = () => {
  console.log("is parent fn");
};
defineExpose({
  parentRef,
  parentFn,
});

//子组件
let parent = getCurrentInstance();
console.log(parent?.parent?.exposed?.parentRef.value);
parent?.parent?.exposed?.parentFn();

新增组件

teleport

官网介绍了很多，这个组件最大的作用就是可以让组件脱离固定的组件位置，可以挂载在逻辑上最优的位置， 其它使用都跟组件一样，只有位置改变：

<teleport to="#teleportDiv">
  <HelloWorld />
</teleport>

<teleport to="body">
  <HelloWorld />
</teleport>

挂载的元素会从上向下解析，第一个to的元素，标签、class、id等。一般使用也不会随便，都会用id元素或者body。

Suspense

Suspense是一个试验性的新特性，官方也说生产环境请勿使用。 主要是允许将组件异步处理等待过程提升到组件树中处理。

单文件组件里面顶层await里面提到： async setup() 必须与 Suspense 组合使用，Suspense 目前还是处于实验阶段的特性。 我们打算在将来的某个发布版本中开发完成并提供文档。

所以这边就不给出不是单文件组件的代码实现了。

生命周期

生命周期还是跟原来的一样，只是前面都加上了on，destroy都变成了unmount。 setup会在beforeCreate、created之前执行，取代了beforeCreate、created。

• beforeCreate --> beforeCreate
• created --> setup
• beforeMount --> onBeforeMount
• mounted --> onMounted
• beforeUpdate --> onBeforeUpdate
• updated --> onUpdated
• beforeDestroy --> onBeforeUnmount
• destroyed --> onUnmount

使用：

onMounted(() => {
  console.log("mounted");
});

试了一下，居然可以写多个。

vue3新增或者删除了哪些API，其实没必要一下子全部去记住，当一些API使用的时候如果发现不生效了， 再去官网查一下，当然，基础的这些API就得记下来。

还是那句话，先学会基础，上手开发，然后慢慢去了解学习不常用的，甚至是源码。

（学习视频分享：vuejs教程、web前端）

Das obige ist der detaillierte Inhalt vonWie Sie schnell mit vue3 beginnen können, lernen Sie diese APIs kennen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

vue3

Quelle：juejin.cn

Vorheriger Artikel：Was ist vm in vue Nächster Artikel：Was sind Mixins? Machen Sie sich mit dem Mischen von Mixin in Vue vertraut

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Verstehen Sie den Sentinel in Redis im Detail
  2023-04-26 17:59:18
• [Organisation und Freigabe] 7 beliebte React-Statusverwaltungstools
  2023-04-26 17:47:48
• In einem Artikel wird der Unterschied zwischen Schlüssel in Vue2 und Schlüssel in Vue3 erläutert
  2023-04-26 17:41:42
• Ein Artikel über Speichersteuerung in Node
  2023-04-26 17:37:05
• Praktische Excel-Kenntnisse weitergeben: 4 Tipps zum Löschen doppelter Werte!
  2023-04-26 17:31:25
• Vermittlung praktischer Word-Kenntnisse: Auf diese Weise kann die Konvertierungsfunktion vom Vereinfachten zum Traditionellen genutzt werden!
  2023-04-26 17:27:32
• Wie lassen sich domänenübergreifende Probleme lösen? Eine kurze Analyse gängiger Lösungen
  2023-04-25 19:57:58
• Ein Artikel zum Verständnis des Singleton-Musters in JavaScript
  2023-04-25 19:53:11
• Erfahren Sie mehr über Puffer in Node
  2023-04-25 19:49:11
• Erfahren Sie, wie Sie Unit-Tests in Vue3 schreiben
  2023-04-25 19:41:54

Aktuelle Ausgaben

Beheben von Problemen beim Produktions-Build von Vue3-Webkomponenten Ich versuche, meine vue2web-Komponenten auf vue3 zu migrieren, obwohl das Problem auftritt...

Aus 2024-04-06 12:43:37

0

1

473

Vite/Vue 3: „Undefinierte Anforderung' bei Verwendung der Bildquelle als Requisite Ich bin von VueCLI zu ViteCLI und von Vue3s CompositionAPI zu SFCScriptsetupAPI gewechselt...

Aus 2024-04-06 09:50:25

0

1

353

Begrenzen Sie die Höhe der zusammengeklappten Akkordeonsegmente Bootstrap 5 Vue3 Ich erstelle eine Webanwendung mit Vue3 und Bootstrap5. Aber ich denke, diese Frage betrif...

Aus 2024-03-31 21:56:54

0

1

332

Vue3.js) Fehler: Modul „Firebase' nicht gefunden Ich verwende Firebase zum ersten Mal mit vue.js. Nach der Installation von Firebase mit np...

Aus 2024-03-31 19:01:32

0

1

304

Erfahren Sie, wie Sie den Eigenschaftswert von CSS.registerProperty() abrufen Ich habe eine Eigenschaft über die Methode CSS.registerProperty registriert. Das Problem b...

Aus 2024-03-30 22:12:33

0

1

275

verwandte Themen

Mehr>

• Der Unterschied zwischen vue2.0 und 3.0
• Was sind die Lebenszyklen von vue3?
• Was soll ich tun, wenn ich mein Breitband-Passwort vergesse?
• Telnet-Befehl
• So stellen Sie Chinesisch in vscode ein
• Checken Sie den virtuellen Standort auf DingTalk ein
• HTTP 503-Fehlerlösung
• Ein Speicher, der Informationen direkt mit der CPU austauschen kann, ist ein

Beliebte Empfehlungen

• Wie ruft eine Vue-Unterkomponente die Methode der übergeordneten Komponente auf?
• Wie ruft eine übergeordnete Vue-Komponente die Methode einer untergeordneten Komponente auf?
• Was ist der Unterschied zwischen vue3.0 und vue2.0?
• Was ist .vue?
• So übergeben Sie einen Wert von der Vue-Unterkomponente an die übergeordnete Komponente

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

• 
  Vue2.0+Vue3.0全套视频教程

  325390
• 
  vue 3.0全新实战课程-第二季

  63231
• 
  VuePress: 30分钟制作一个Vue静态网站

  17017
• 
  VuePress: Vue 官方静态网站生成器极速指南

  9022
• 
  Vue.js：纪录片

  1636

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1414823 Lernzeiten
• 
  JAVA 初级入门视频教程

  2460662 Lernzeiten
• 
  小甲鱼零基础入门学习Python视频教程

  502520 Lernzeiten
• 
  Web前端开发极速入门

  215149 Lernzeiten
• 
  零基础精通 PS 视频教程

  872862 Lernzeiten

• 
  【web前端】Node.js快速入门

  6087 Lernzeiten
• 
  国外Web开发全栈课程全集

  4637 Lernzeiten
• 
  Go语言实战之 GraphQL

  3996 Lernzeiten
• 
  550W粉丝大佬手把手从零学JavaScript

  595 Lernzeiten
• 
  python大神Mosh，零基础小白6小时完全入门

  20379 Lernzeiten

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

• [表单按钮] jQuery企业留言表单联系代码
• [播放器特效] HTML5 MP3音乐盒播放特效
• [菜单导航] HTML5炫酷粒子动画导航菜单特效
• [表单按钮] jQuery可视化表单拖拽编辑代码
• [播放器特效] VUE.JS仿酷狗音乐播放器代码
• [html5特效] 经典html5推箱子小游戏
• [图片特效] jQuery滚动添加或减少图片特效
• [相册特效] CSS3个人相册封面悬停放大特效

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

Über uns Haftungsausschluss Sitemap

Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！