1. まず第一に、Vue チームによるプロトタイプ チェーンのカプセル化と改善により、Vue3 は Vue2 のようにプロトタイプにデータを直接配置できません。
Vue2 の仕組みは次のとおりです。
//Vue2的main.js:
import Vue from 'vue'
Vue.prototype.myName = '张三';
//通过在Vue.prototype上放了一个myName的属性,其他组件都可以使用this.myName获取到张三
2. プロトタイプにデータを実装する目的は、すべてのコンポーネントがこれを通じて実装されたデータを取得できるようにするためです。
Vue3 が同じ効果を達成したい場合、つまり (すべてのコンポーネントが this.myName を通じて Zhang San を取得できる)、vue3 の mixin メソッドを使用する必要があります。
//Vue3的main.js
import { createApp } from 'vue'
import App from './App.vue'
//定义mixin
const myMixin = {
created() {
this.myName = '张三';
}
};
const app = createApp(App);
//使用mixin
app.mixin(myMixin);
このように、他のコンポーネントを使用する場合、アプリのインスタンスから「Zhang San」を取得でき、Vue.prototype にデータをマウントするのと同じ効果が得られます。
3. 任意のコンポーネントで使用します。
-- 結合された API
//组合式api没有this,所以要用getCurrentInstance方法获取vue实例,上边挂载的数据就在实例中
<script setup>
import {getCurrentInstance} from "vue"
const v3This = getCurrentInstance()
console.log(v3This.ctx.myName);//张三
//挂载的数据被放在了getCurrentInstance函数返回结果的ctx上,
</script>
-- オプションの API
//因vue3会兼容vue2的代码,所以也可以用vue2的选项式api的获取方式,直接从this上获取
<script>
export default {
mounted(){
console.log(this.myName)//张三
}
}
</script>