vuejs3 - vue 3 data() not workink setup() 工作但为什么？

Question

有什么区别？为什么一个工作而另一个为什么不工作？后者包含在文档中，但不起作用。webpack有什么问题吗？我使用 laravel-mix

此代码片段有效：

<template>
 <button @click="log">click me<button>
</template>
<script>
 export default {
  setup() {
   const log = () => console.log('run');
   return {
    log
   };
  }
 }
</script>

此代码段不起作用：

<template>
 <button @click="log">click me<button>
</template>
<script>
 export default {
  methods: {
   log() {
    console.log('run');
   }
  }
 }
</script>

Answer 1

两者都不应该工作，因为您忘记关闭按钮，这会导致编译器错误。

无论如何，如果您修复标记中的错误，两者都应该有效。

在这里，您使用的是 Vue 的 Options Api。

<template>
  <button @click="log">click me</button>
</template>


<script>
export default {
  methods: {
    log() {
      console.log("run");
    },
  },
};
</script>

这里你使用的是 Vue 的 Composition Api

<template>
  <button @click="log">click me</button>
</template>


<script>
export default {
  setup() {
    const log = () => console.log('run')

    return {
      log
    }
  }
};
</script>

也许您还禁用了 webpack.mix.js 中的 Options Api？