vue.js - 如何在 Vue Composition API 中使用 ref、watch 或类似功能

Question

我想知道在通过 CDN 导入 vue 时，如何在 Vue 3 的 setup() 区域中使用 ref 或 watch。

代码如下:

<div id="app">

    {{ counter }}

  </div>

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

const app = Vue.createApp({
  props: {
    name: String
  },
  setup(){
    const capacity = ref(3)
  },
  data(){
    return {
      counter: 43
    }
  },
})

这会引发错误

ref is not defined

Answer 1

导入 ref 尝试:

const { createApp, ref, computed, watch } = Vue;

您需要像这样从setup 返回变量作为对象

const app = createApp({
  props: {
    name: String
  },
  setup(){
    const capacity = ref(3)
    return { capacity };
  },
  /* data(){  // NO NEED
    return {
      counter: 43
    }
  }, */
})