[Compilation et résumé] Explication détaillée de 11 points de connaissance de Vue3

Cet article résume et partage les notes d'étude de Vue3 et fournit une compréhension approfondie de 11 points de connaissance de Vue3. J'espère qu'il sera utile à tout le monde !

《Vue3+Node+Webpack+API Mall Cours de développement pratique en ingénierie de projet ! 》

1. Pourquoi choisir CompositionAPI

Limitations de Vue2

• Mauvaise lisibilité causée par l'expansion de la logique des composants
• Impossible de réutiliser le code entre les composants
• Vue2 a une prise en charge limitée pour TS

Dans l'API Options traditionnelle, nous devons répartir la logique dans les six parties suivantes. [Recommandations associées : tutoriel vidéo vue.js]

OptionsAPI

• composantscomponents
• props
• data
• computed
• methods
• lifecycle methods
props

données

calculées

méthodes

méthodes de cycle de vie

Comment utiliser CompositionAPI pour résoudre le problème

La meilleure solution est d'agréger les logique Peut rendre le code très bien lisible.

C'est ce que notre syntaxe CompositionAPI peut réaliser. CompositionAPI est une syntaxe complètement facultative et n'a aucun conflit avec l'OptionAPI d'origine. Cela nous permet d'organiser le code avec la même fonction ensemble sans le disperser dans tous les coins des optionsAPI

Méthode de réutilisation du code PK
• Code de réutilisation multi-composants dans Vue2, nous aurons environ quatre choix
• 1.

Le mélange de codes est en fait le mode de mélange en mode conception, et ses défauts sont également très évidents.
• peut être compris comme un héritage multiple. En termes simples, c'est ainsi qu'une personne a deux pères

Inconvénients

Impossible d'éviter les conflits de noms d'attributs

La relation d'héritage n'est pas claire

2. - Mixin Factory

Renvoyer un

✅La réutilisation du code est pratique

✅Nettoyage des relations d'héritage

3. ScopeSlots - Emplacements de portée

❌Pas très lisible

❌La configuration est complexe - doit être configurée dans le template

❌Faibles performances - chaque emplacement est équivalent à une instance

4. CompositionApi - API composite

✅Faible quantité de code✅Aucune nouvelle syntaxe n'est introduite, juste une fonction simple

✅Exceptionnellement flexible

✅Invites de syntaxe conviviales - Parce qu'il s'agit d'une fonction simple, il est facile d'implémenter des invites de syntaxe et une compensation automatique

2 Configuration et référence

Raisons d'utilisation de CompositionAPI

✅Meilleure prise en charge de Typescript. ✅Dans les composants fonctionnels complexes, le code peut être organisé en fonction de caractéristiques - cohésion du code, telles que :

Cohésion logique de tri et de recherche

• ✅Réutilisation du code entre les composants
  • Qu'est-ce que la configuration
  • Exécuté avant ce qui suit méthode:
  • Composants
  • Props
Données
• Méthodes
• Propriétés calculées
  • Méthodes de cycle de vie

Vous ne pouvez plus utiliser ce qui est difficile à comprendre

a deux paramètres facultatifs
• props - propriétés ( objets réactifs et pouvant être écoutés (regarder))

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

objet de contexte contextuel - utilisé pour remplacer les attributs accessibles par la méthode précédente

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

Qu'est-ce que la réf

pour installer les opérations de base du type de données Data Box en font un objet réactif qui peut suivre les modifications des données.

🎜🎜Résumé🎜🎜🎜🎜🎜🎜La maintenabilité a été considérablement améliorée🎜

• 可以控制哪些变量暴露
• 可以跟中哪些属性被定义 （属性继承与引用透明）

三、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 id="Attending">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 id="Attending">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  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>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!