【まとめ・まとめ】Vue3の11の知識を詳しく解説

この記事は、Vue3 の学習ノートをまとめて共有し、Vue3 の 11 の知識ポイントを深く理解することを目的としています。

Vue3 Node Webpack APIモールプロジェクトエンジニアリング実践開発コース！ >>

1.CompositionAPI を選択する理由

Vue2 の制限

#コンポーネントのロジック拡張による可読性の低下
• コンポーネント間でコードを再利用できない
• Vue2 では TS

のサポートが制限されています。 OptionsAPI では、ロジックを次の 6 つの部分に分割する必要があります。 [関連する推奨事項:

vue.js ビデオ チュートリアル ]

OptionsAPI

##components
• プロップ
• データ
• 計算された
• メソッド
• ライフサイクル メソッド
• CompositionAPI を使用して問題を解決する方法

最良の解決策は、ロジックを集約することです。コードは非常に複雑になります。可読性が良い。

これは、CompositionAPI 構文で実現できることです。 CompositionAPI は完全にオプションの構文であり、元の OptionAPI と競合することはありません。これにより、同じ機能を持つコードを隅々まで散在させることなくまとめて整理することができます。 API

コード再利用メソッド PK

Vue2 には、コンポーネント間での再利用コードがあります。おそらく 4 つのオプション

#1. Mixin - Mixin

コード ミキシングは、実際にはデザイン モードのミキシング モードであり、その欠点も非常に大きいです。明らか 。

• 多重継承として理解できます。簡単に言うと、人には 2 人の父親がいるということです。

欠点

できない回避する必要があります 属性名の競合

• 不明瞭な継承関係
• #2. Mixin Factory - Mixin Factory

は次の結果を返します

##✅コードの再利用は便利です

✅継承関係のクリーニング

3. ScopeSlots - スコープ スロット

❌あまり読みにくい

❌構成の複雑さ - が必要テンプレートで構成されます

❌低パフォーマンス - 各スロットはインスタンスと同等です

4、CompositionApi - 複合 API

✅コードの量が少ない

✅新しい構文は導入されておらず、単純な関数のみです

#✅非常に柔軟です

#✅ツールの構文プロンプトはフレンドリーです。関数を使用すると、構文プロンプトと自動補正を実装するのが非常に簡単です

2. setup & ref

CompositionAPI を使用する理由

✅Typescript サポートの強化#✅複雑な機能コンポーネントでは、次のようなコードの凝集度などの特性に応じてコードを編成できます。 並べ替えと検索ロジックの凝集度

✅コンポーネント コード間の再利用

セットアップとは

次のメソッドの前に実行します:コンポーネント

プロパティ
• データ
  • メソッド
  • 計算されたプロパティ
  • ライフサイクル メソッド
  • #できる使用するのはもう難しくありません。これを理解してください。
  • には 2 つのオプションのパラメータがあります。
  props - プロパティ (応答性の高いオブジェクトと監視 (監視) が可能です)

• import {watch} from "vue"
  export defalut {
  	props: {
  		name: String
  	},
  	setup(props) {
  		watch(() => {
  			console.log(props.name)
  		})
  	}
  }
  context context オブジェクト - 以前の this メソッドでアクセスできるプロパティを置き換えるために使用されます

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

ref とは

#基本データ型データのボックス化操作により、データの変更を追跡できる応答性の高いオブジェクトになります。

#概要

保守性が大幅に向上

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

三、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 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>

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

以上が【まとめ・まとめ】Vue3の11の知識を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。