Vue3 - 反应性道具和根组件

Question

我试图通过 Vue3 组件显示 OpenLayers map 的缩放级别。 在 Vue2 中，一切都按预期工作，并且在放大 map 时 vue 组件正在更新：

index.js

import 'ol/ol.css';
import {
    Map,
    View
}
from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Vue from 'vue';
import App from './App.vue';

const view = new View({
    center: [0, 0],
    zoom: 0
});

const map = new Map({
    target: 'map',
    layers: [
        new TileLayer({
            title: 'OSM',
            source: new OSM()
        })
    ],
    view: view
});

new Vue({
    data: {
        mapX: map
    },
    el: '#app',
    render: h => h(App, {
        props: {
            mapX: map
        }
    })
});

应用程序.vue

<template>
  <div>
    <h3>{{ zoomlevel }}</h3>         
  </div>
</template>

<script>
export default {
    props: {
        mapX: {
            type: Object
        }
    },
    computed: {
        zoomlevel: function () {
            return this.mapX.getView().getZoom()
        }
    }
}
</script>

但是我无法使用 Vue3 实现反应性。

Vue3 index.js

import 'ol/ol.css';
import {
    Map,
    View
}
from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Vue from 'vue';
import App from './App.vue';
import {
    createApp,
    h
}
from 'vue';

const view = new View({
    center: [0, 0],
    zoom: 0
});

const map = new Map({
    target: 'map',
    layers: [
        new TileLayer({
            title: 'OSM',
            source: new OSM()
        })
    ],
    view: view
});

const app = createApp({
    data() {
        return map
    },
    render: () => h(App, {
        mapX: map
    })
})

const vm = app.mount("#app");

应用程序.vue 3

<template>
  <div>
    <h3> ZooM: {{ zoomlevel }} </h3>    
  </div>
 </template>

 <script>
export default {

    props: {
        mapX: {
            type: Object
        }
    },
    computed: {
        zoomlevel: function () {
            return this.mapX.getView().getZoom()
        }
    }
}
</script>

使用render: () => h(App, {props: {mapX: map}})无法正常工作。 我会很高兴得到任何帮助。

Answer 1

反应数据 object 必须是纯 js object，这意味着它的原型必须是 object。 您的视图被创建为 new View() 所以它不会工作。

vue2 也明确规定了相同的要求。 但观点 2 可能没有严格执行