无法运行的案例

我在学习Vue3时遇到了如下的案例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16



const TodoItem = {
  template: `<li>This is a todo</li>`
}

// 创建 Vue 应用
const app = Vue.createApp({
  components: {
    TodoItem // 注册一个新组件
  },
  ... // 组件的其它 property
})

// 挂载 Vue 应用
app.mount(...)

因为我是在脚手架里开发，所以我做了如下调整：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28



import {defineComponent} from 'vue';

const ToDoItem = {
  template: `<li>This is a todo</li>`
}

export default defineComponent({
  // 方案一
  components: {
    ToDoItem
  },
  // 方案二
  components: {
    ToDoItem: defineComponent(ToDoItem)
  },
  data() {
    return {
      todos: [
        {text: 'Learn JavaScript'},
        {text: 'Learn Vue'},
        {text: 'Build Something Awesome'},
      ]
    }
  },
  methods: {}
})

但是无论如何都无法渲染出ToDoItem组件，且渲染出来的地方都显示为。我观察Console，有如下报错：

2022-04-07-15-31-30

先记录一下这个问题，以后有时间再优化。