vue 3 data() 不是 workink setup() 工作但为什么？

问题描述

有什么区别？为什么一个工作，另一个为什么不呢？后者包含在文档中但不起作用。 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>

解决方法

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

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

这里您使用的是 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？