vue3【2.vue3の大幅な変更】

vue3の主な変更

エントリファイルmain.js

main.js：

//vue3
import {
    
     createApp } from 'vue'
import App from './App.vue'
import './index.css'
const app = createApp(App);
app.mount('#app')

app.use('插件')

//vue2
const app = new Vue(options);
Vue.use(插件);
app.$mount('#app');

分析：

1. Vue3はコンストラクター関数vueを提供していません。名前でcreateAppをインポートし、ルートコンポーネントアプリを渡してインスタンスアプリを取得し、app.mount（）が対応する部分にマウントされます。
2. プラグインの使用の違いは、vue3がcreateAppを介してインスタンスアプリを直接取得し、app.useがプラグインを使用することです。Vue2は、VueコンストラクターであるVue.use（プラグイン）を介してプラグインを使用します。

コンポーネント内のこのポイント

• これはvue2で、コンポーネントインスタンスを指しています。
• vue3では、これはプロキシを指し、プロキシはコンポーネントインスタンスを指します。

構成API

• テンプレートには複数のルートノードが存在する可能性があります
• vue2にはオプションAPI（構成）があり、vue3には新しいコンポジションAPIがあります
• Vue3は、元のvue2オプションapiの記述もサポートしています。
  • 構成APIによって引き起こされる問題：機能が異なる構成に割り当てられ、メンテナンスの問題が発生する可能性があります。いくつかの機能に適しています。
  • コンポジションAPIは、この問題を解決できます。これは、1つのコードブロックの機能です。多くの機能に適しています。

セットアップ機能

分析例：

<template>
  <h1>count:{
    
    {
    
    count}}</h1>
  <p>
    <button @click="increase">increase</button>
    <button @click="decrease">decrease</button>
  </p>
</template>

<script>
import {
    
     ref } from "vue";
function useCount() {
    
    
  // 使用ref将变量变成响应式的
  let count = ref(0);
  const increase = () => {
    
    
    count.value++;
  };
  const decrease = () => {
    
    
    count.value--;
  };
  return {
    
    
    count,
    increase,
    decrease
  };
}
export default {
    
    
  setup() {
    
    
    console.log("所有生命周期函数之前调用");
    // this -> undefined
    // 在setup中 ref定义的要 使用.value访问，而组件中直接使用，组件中通过代理访问，本质还是.value
    // 返回的对象会挂载到组件实例上
    return {
    
    
      ...useCount()
    };
  }
};
</script>