未捕获的类型错误：在 vue 3 中加载条目时，dataOptions.call 不是一个函数

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

最后我发现vue 3 无法理解其中dataOptions定义的数据，在旧版 vue 中，定义如下数据：appOptions

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

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

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

  return { foo, bar }
}

更多信息请参见此处。我像这样改变了我的代码：

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