VueJS 从 2X 迁移到 3X 不工作

Question

我正在尝试将遗留应用程序从 Vue 2 转换为 Vue 3。我对 Vue 不是很熟悉，我正在尝试遵循他们在其文档网站上提供的新迁移模板，但我运行进入问题。我没有收到任何 JS 控制台错误，但我的 Vue 代码不再呈现。

现有代码

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            applications: []
        },
        created: function () {
            console.log('Vue App Created'); 
            this.loadModel();
        },
        methods:
        {
            loadModel: function () {
                var url = "/Home/ApplicationData";
                $.get(url, function (resp) {
                    console.log(resp); // Note: For Testing
                    vm.applications = resp;
                });
            }
        }
    });
</script>

我的Vue 3迁移尝试

<script>
  Vue.createApp({
    data() {
      return {
        applications: []
      }
    },
    created() {
        console.log('Vue App Created'); 
        this.loadModel();
    },
    methods: {
        loadModel: function () {
            var url = "/Home/ApplicationData";
            $.get(url, function (resp) {
                console.log(resp); // Note: For Testing
                vm.applications = resp;
            });
        }
    }
  }).mount('#app')
</script>

HTML

<div id="app">
<ul>
    <li v-for="application in applications">{{ application.name }} - {{ application.url }}</li>
</ul>
</div>

Answer 1

主要问题在这里：

vm.applications = resp;

旧代码使用 vm 来引用根组件，但它没有在您的新代码中分配。但是，vm 引用从来都不是真正必要的。它可以通过使用箭头函数而不是常规函数来避免。

将 $.get 回调从常规函数更改为 arrow function。
将vm替换为this。

Vue.createApp({
  ⋮
  methods: {
    loadModel: function () {
      var url = "/Home/ApplicationData";
                    1️⃣
      $.get(url, (resp) => {
          2️⃣
        this.applications = resp;
      });
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@3.2.31"></script>
<script src="https://unpkg.com/axios@0.26.0/dist/axios.min.js"></script>
<div id="app">
<ul>
    <li v-for="application in applications">{{ application.name }}</li>
</ul>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        applications: []
      }
    },
    created() {
        console.log('Vue App Created'); 
        this.loadModel();
    },
    methods: {
        loadModel() {
            var url = "//jsonplaceholder.typicode.com/users";
            axios.get(url).then((resp) => {
                console.log(resp); // Note: For Testing
                this.applications = resp.data;
            });
        }
    }
  }).mount('#app')
</script>

VueJS 从 2X 迁移到 3X 不工作

VueJS Migration from 2X to 3X Not Working

vue.js

vue-component

vuejs2

vuejs-transition

vuejs3