javascript - Uncaught TypeError : dataOptions. call is not a function when load entry in vue 3

Question

我将 vue 升级到 3.x "vue": "^3.2.28"，然后像这样调整代码初始应用程序:

import Vue from 'vue';
import template from './tpl.html';
import chromeCall from 'chrome-call';
import getOptions from '../public/default-options';
import {getTabLocation,isHostEnabled} from '../public/util';
import ST from './st';
import { createApp } from "vue";

export const appOptions = {
  el : 'app' ,
  template ,
  data : {
    _host : null ,
    canInject : false ,
    enabled : false
  } ,
  methods : {
    async switchEnable() {
      const {_host} = this.$data ,
        enabled = this.enabled = !this.enabled ,
        {excludeDomains} = await getOptions( 'excludeDomains' );

      if ( enabled ) {
        excludeDomains.splice( excludeDomains.indexOf( _host ) , 1 );
      } else {
        excludeDomains.push( _host );
      }
      return chromeCall( 'storage.local.set' , { excludeDomains } );
    }
  } ,
  components : {
    'st-box' : ST
  } ,
  async ready() {
    const locationObj = await getTabLocation();
    if ( locationObj ) {
      this.$data._host = locationObj.host;
      this.canInject = true;
      this.enabled = await isHostEnabled( locationObj );
    }
  }
};

/* istanbul ignore if */
if ( process.env.NODE_ENV !== 'testing' ) {
  window.onload = ()=> {
    setTimeout( ()=> {
      const app = createApp(appOptions);
      app.mount("app");
    }, 0 );
  };
}

我用 Vue 3 方式更改了应用程序的首字母。遗留初始是 new Vue()，新方法是 createApp。当我运行这段代码时，显示如下错误:

Uncaught TypeError: dataOptions.call is not a function
    at applyOptions (commons1.js:4175:34)
    at finishComponentSetup (commons1.js:8531:9)
    at setupStatefulComponent (commons1.js:8443:9)
    at setupComponent (commons1.js:8373:11)
    at mountComponent (commons1.js:6296:13)
    at processComponent (commons1.js:6271:17)
    at patch (commons1.js:5872:21)
    at render (commons1.js:7015:13)
    at mount (commons1.js:5261:25)
    at Object.app.mount (commons1.js:10834:23)

我错过了什么？我应该如何调整我的代码以使其正常工作？

Answer 1

最后我弄清楚 dataOptions 是 appOptions 中定义的数据，vue 3 无法理解，在旧版 vue 中，这样定义数据:

data() {
  return {
    foo: 1,
    bar: { name: "hi" }
  }
}

在vue 3中，我们应该这样定义:

setup() {
  const foo = ref(1);
  const bar = reactive({ name: "hi" });

  return { foo, bar }
}

更多信息在here .我这样更改了我的代码:

setup () {
    const host =null;
    const canInject =false;
    const enabled = false;
    return {host,canInject,enabled};
  } ,