[Zusammenstellung und Zusammenfassung] Detaillierte Erläuterung der 11 Wissenspunkte von Vue3

Dieser Artikel fasst Vue3-Studiennotizen zusammen und vermittelt ein detailliertes Verständnis von 11 Wissenspunkten von Vue3. Ich hoffe, dass er für alle hilfreich sein wird!

《Vue3+Node+Webpack+API Mall Project Engineering Praktischer Entwicklungskurs! 》

1. Warum CompositionAPI wählen? Einschränkungen von Vue2: Schlechte Lesbarkeit durch Erweiterung der Komponentenlogik. Code kann nicht komponentenübergreifend wiederverwendet werden. Vue2 unterstützt TS nur eingeschränkt.

In der traditionellen OptionsAPI müssen wir die Logik in die folgenden sechs Teile aufteilen. [Verwandte Empfehlungen: vue.js Video-Tutorial

]

• OptionsAPI

components

propsdata

berechnet

Methoden

Lebenszyklusmethoden

• components
• props
• data
• computed
• methods
• lifecycle methodsSo verwenden Sie CompositionAPI, um das Problem zu lösen

Die beste Lösung besteht darin, die zu aggregieren Logik Kann den Code sehr gut lesbar machen.

Das kann unsere CompositionAPI-Syntax erreichen. CompositionAPI ist eine vollständig optionale Syntax und steht nicht in Konflikt mit der ursprünglichen OptionAPI. Es ermöglicht uns, Code mit derselben Funktion zusammen zu organisieren, ohne ihn in jeder Ecke der OptionsAPI zu verstreuen. Code-Wiederverwendungsmethode PK. Komponentenübergreifender Wiederverwendungscode in Vue2. Wir haben etwa vier Auswahlmöglichkeiten: Mixin – Mixin

Code-Mischung ist eigentlich der Mischmodus im Entwurfsmodus, und seine Mängel liegen ebenfalls auf der Hand.

kann als Mehrfachvererbung verstanden werden. Es ist so, dass eine Person zwei Väter hat - Mixin Factory

Eins zurückgeben

✅Die Wiederverwendung von Code ist praktisch
• ✅Bereinigung der Vererbungsbeziehung
• 3. ScopeSlots – Scope-Slots

❌Nicht sehr lesbar

❌Die Konfiguration ist komplex – muss im konfiguriert werden Vorlage

❌Geringe Leistung – jeder Slot entspricht einer Instanz
• 4. CompositionApi – zusammengesetzte API

✅Geringe Menge an Code

✅Es wird keine neue Syntax eingeführt, nur eine einfache Funktion

✅Außergewöhnlich flexibel

✅Toolfreundliche Syntax-Eingabeaufforderungen – Da es sich um eine einfache Funktion handelt, ist es einfach, Syntax-Eingabeaufforderungen und automatische Kompensation zu implementieren.

2. Einrichtung und Referenz. Gründe für die Verwendung von CompositionAPI

✅In komplexen Funktionskomponenten kann Code nach Merkmalen organisiert werden – Codekohäsion, wie zum Beispiel:

Sortier- und Suchlogikkohäsion

✅Codewiederverwendung zwischen Komponenten

Was ist eingerichtet?

Vor dem Folgenden ausgeführt Methode:

Komponenten

Props

DatenMethodenBerechnete Eigenschaften

Lebenszyklusmethoden

Sie können die schwer verständlichen Methoden nicht mehr verwenden

hat zwei optionale Parameter

props - Eigenschaften ( reaktive Objekte und können abgehört werden (beobachten))

import {watch} from "vue"
export defalut {
	props: {
		name: String
	},
	setup(props) {
		watch(() => {
			console.log(props.name)
		})
	}
}

context Kontextobjekt – wird verwendet, um die Attribute zu ersetzen, auf die mit der vorherigen Methode zugegriffen werden kann

• setup (props,context) {
  	const {attrs,slots,parent,root,emit} = context
  }

  • Was ist ref?
  • So installieren Sie grundlegende Datentyp-Datenbox-Operationen, die es zu einem reaktiven Objekt machen, das Datenänderungen verfolgen kann.
• Zusammenfassung
• Die Wartbarkeit wurde erheblich verbessert
• 可以控制哪些变量暴露
• 可以跟中哪些属性被定义 （属性继承与引用透明）

三、Methods

基础用法



自动拆装箱总结



• JS ：需要通过.value访问包装对象
• 模板: 自动拆箱

四、 Computed - 计算属性

这个地方实在没什么好讲的，和Vue2没变化

<template>
  <div>
    <div>Capacity： {{ capacity }}</div>
    <p>Spases Left: {{ sapcesLeft }} out of {{ capacity }}</p>
    <button @click="increaseCapacity()">Increase Capacity</button>
  </div>
</template>

<script>

import { ref, computed, watch } from "vue";
export default {
  setup(props, context) {
    const capacity = ref(3);
    const attending = ref(["Tim", "Bob", "Joe"]);
    function increaseCapacity() {
      capacity.value++;
    }
    const sapcesLeft = computed(() => {
      return capacity.value - attending.value.length;
    });
    return { capacity, increaseCapacity, attending, sapcesLeft };
  },
};
</script>

五、Reactive - 响应式语法

之前reactive 的 Ref 去声明所有的响应式属性

import { ref,computed } from 'vue'
export default {
  setup(){
    const capacity = ref(4);
    const attending = ref(["Tim","Bob","Joe"]);
    const spacesLeft = computed(()=>{
      return capacity.value - attending.value.length
    })
    function increaseCapacity(){ capacity.value ++;}
    return { capacity,increaseCapacity,attending,spacesLeft}
  }
}

但是有另一个等效的方法用它去代替 reactive 的Ref

import { reactive,computed } from 'vue'
export default {
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spacesLeft:computed(()=>{
        return event.capacity - event.attending.length;
      })
    })
  }
}

过去我们用vue2.0的data来声明响应式对象,但是现在在这里每一个属性都是响应式的包括computed 计算属性

这2种方式相比于第一种没有使用.

接下来 我们再声明method 这2种语法都ok，取决于你选择哪一种

setup(){
  const event = reactive(){
    capacity:4,
    attending:["Tim","Bob","Joe"],
    spacesLeft:computed(()=>{
      return event.capacity - event.attending.length;
    })
    function increaseCapacity(){event.capacity++}
    //return整个对象
    return {event,increaseCapacity}
  }
}

<p>Spaces Left:{{event.spacesLeft}} out of {{event.capacity}}</p>
<h2>Attending</h2>
<ul>>
	<li v-for="(name,index) in event.attending" :key="index">
     {{name}}
  </li>
</ul>
<button @click="increaseCapacity()"> Increase Capacity</button>

在这里我们使用对象都是.属性的方式，但是如果 这个结构变化了，event分开了编程了一个个片段，这个时候就不能用.属性的方式了

//在这里可以使用toRefs
import {reactive,computed,toRefs} from 'vue'
export default{
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spacesLeft:computed(()=>{
        return event.capacity -event.attending.length;
        
      })
    })
    function increaseCapacity(){ event.capacity ++ }
    return {...toRefs(event),increaseCapacity}
  }
}

如果没有 increaseCapacity() 这个方法 直接可以简化为

return toRefs(event)

完整代码

<div>
   <p>Space Left : {{event.spacesLeft}} out of {{event.capacity}} </p>
   <h2>Attending</h2>
   <ul>
      <li v-for="(name,index)" in event.attending :key="index">{{name}}
      </li>


     
   </ul>
   <button @click="increaseCapacity">Increase Capacity</button>
   </div>
</template>

<script>
//第一种
import {ref,computed } from &#39;vue&#39;
export default {
  setup(){
    const capacity = ref(4)
    const attending = ref(["Tim","Bob","Joe"])
    const spaceLeft = computed(()=>{
      return capacity.value - attending.value.length;
    });
    function increaseCapacity(){ capacity.value++; }
    return {capacity,increaseCapacity,attending,spaceLeft}   


  }
} 

//返回一个响应式函数 第二种
import { reactive,computed } from &#39;vue&#39;
export default {
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spaceLeft:computed(()=>{
        return event.capacity - event.attending.length;
      })
    })
    //我们不再使用.value
    function increaseCapacity() { event.capacity++; }
    //把这个event放入到template中
    return { event,increaseCapacity}
  }
}


</script>

六、 Modularizing

使用CompositionAPI的两个理由

1、可以按照功能组织代码



2、组件间功能代码复用





七、 LifecycleHooks - 生命周期钩子

Vue2	Vue3
beforeCreate	❌setup(替代)
created	❌setup(替代)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured
-	?onRenderTracked
-	?onRenderTriggered

setup中调用生命周期钩子

import { onBeforeMount,onMounted } from "vue";
export default {
  setup() {
    onBeforeMount(() => {
        console.log('Before Mount!')
    }) 
    onMounted(() => {
        console.log('Before Mount!')
    }) 
  },
};

八、Watch - 监听器

// 所有依赖响应式对象监听
watchEffect(() => {
   results.value = getEventCount(searchInput.value);
 });

// 特定响应式对象监听
watch(
  searchInput,
  () => {
    console.log("watch searchInput:");
  }
);

// 特定响应式对象监听 可以获取新旧值
watch(
  searchInput,
 (newVal, oldVal) => {
    console.log("watch searchInput:", newVal, oldVal);
  },
);

// 多响应式对象监听
watch(
  [firstName,lastName],
 ([newFirst,newLast], [oldFirst,oldlast]) => {
   // .....
  },
  
);

// 非懒加载方式监听 可以设置初始值
watch(
  searchInput,
  (newVal, oldVal) => {
    console.log("watch searchInput:", newVal, oldVal);
  },
  {
    immediate: true, 
  }
);

九、Sharing State - 共享状态



编写一个公共函数usePromise函数需求如下：

• results : 返回Promise执行结果
• loading： 返回Promise运行状态
  • PENDING :true
  • REJECTED : false
  • RESOLVED: false
• error ： 返回执行错误



import { ref } from "vue";

export default function usePromise(fn) {
  const results = ref(null);
  // is PENDING
  const loading = ref(false);
  const error = ref(null);

  const createPromise = async (...args) => {
    loading.value = true;
    error.value = null;
    results.value = null;
    try {
      results.value = await fn(...args);
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false;
    }
  };
  return { results, loading, error, createPromise };
}

应用


import { ref, watch } from "vue";
import usePromise from "./usePromise";
export default {
  setup() {
    const searchInput = ref("");
    function getEventCount() {
      return new Promise((resolve) => {
        setTimeout(() => resolve(3), 1000);
      });
    }

    const getEvents = usePromise((searchInput) => getEventCount());

    watch(searchInput, () => {
      if (searchInput.value !== "") {
        getEvents.createPromise(searchInput);
      } else {
        getEvents.results.value = null;
      }
    });

    return { searchInput, ...getEvents };
  },
};

十、Suspense - 悬念

复杂的Loading实现

我们考虑一下当你加载一个远程数据时，如何显示loading状态

通常我们可以在模板中使用v-if



但是在一个组件树中，其中几个子组件需要远程加载数据，当加载完成前父组件希望处于Loading状态时我们就必须借助全局状态管理来管理这个Loading状态



Suspense基础语法

这个问题在Vue3中有一个全新的解决方法。

这就是Suspense Component，悬念组件。



<template>
  <div>
    <div v-if="error">Uh oh .. {{ error }}</div>
    <Suspense>
      <template #default>
        <div>
          <Event />
          <AsyncEvent />
        </div>
      </template>
      <template #fallback> Loading.... </template>
    </Suspense>
  </div>
</template>

<script>
import { ref, onErrorCaptured, defineAsyncComponent } from "vue";

import Event from "./Event.vue";

const AsyncEvent = defineAsyncComponent(() => import("./Event.vue"));
export default {
  components: {
    Event,
    AsyncEvent,
  },

  setup() {
    const error = ref(null);
    onErrorCaptured((e) => {
      error.value = e;
      // 阻止错误继续冒泡
      return true;
    });
    return { error };
  },
};
</script>

骨架屏实现





十一、Teleport - 传送门

功能

类似React中的Portal, 可以将特定的html模板传送到Dom的任何位置



基础语法

通过选择器QuerySelector配置



示例代码



<template>
  <div>
    <teleport to="#end-of-body" :disabled="!showText">
      <!-- 【Teleport : This should be at the end 】 -->
      <div>
        <video src="../assets/flower.webm" muted controls="controls" autoplay="autoplay" loop="loop">
          
        </video>
      </div>
    </teleport>
    <div>【Teleport : This should be at the top】</div>
    <button @click="showText = !showText">Toggle showText</button>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const showText = ref(false);
    setInterval(() => {
      showText.value = !showText.value;
    }, 1000);
    return { showText };
  },
};
</script>

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt von[Zusammenstellung und Zusammenfassung] Detaillierte Erläuterung der 11 Wissenspunkte von Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!