Vue 3 是否向后兼容 Vue 2？

Question

在互联网上的不同帖子（例如this one）中，我发现 Vue 2 代码应该与 Vue 3 一起使用，但对我来说却不行。例如我有简单的组件

<template>
    <div class="overflow-x-auto bg-white rounded-lg shadow overflow-y-auto relative">
        <table class="table">
            <thead>
                <tr class="text-left">
                    <th>
                        <label>
                            <input type="checkbox">
                        </label>
                    </th>
                    <th>User ID</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                    <th>Gender</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <label>
                            <input type="checkbox" name="1">
                        </label>
                    </td>
                    <td> <span>{{ id }}</span> </td>
                    <td> <span>Cort</span> </td>
                    <td> <span>Tosh</span> </td>
                    <td> <span>{{ email }}</span> </td>
                    <td> <span>Male</span> </td>
                    <td> <span>327-626-5542</span> </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            id: 1,
            email: 'test@mail.com'
        }
    },

    mounted() {
        alert('mounted');
    },

    created() {
        alert('created');
    }
};
</script>

表格生成得很好，但是mounted 和created 在组件制作时都没有触发。 email 和 id 也未显示。只显示表格。

Answer 1

您的代码有效：

Vue.createApp({
  data() {
    return {
      id: 1,
      email: 'test@mail.com'
    }
  },
  created() {
    alert('created')
  },
  mounted() {
    alert('mounted')
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next"></script>

  <div id="app" class="overflow-x-auto bg-white rounded-lg shadow overflow-y-auto relative">
      <table class="table">
          <thead>
              <tr class="text-left">
                  <th>
                      <label>
                          <input type="checkbox">
                      </label>
                  </th>
                  <th>User ID</th>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Email</th>
                  <th>Gender</th>
                  <th>Phone</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>
                      <label>
                          <input type="checkbox" name="1">
                      </label>
                  </td>
                  <td> <span>{{ id }}</span> </td>
                  <td> <span>Cort</span> </td>
                  <td> <span>Tosh</span> </td>
                  <td> <span>{{ email }}</span> </td>
                  <td> <span>Male</span> </td>
                  <td> <span>327-626-5542</span> </td>
              </tr>
          </tbody>
      </table>
  </div>