vue 3 data() 不工作 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 的选项 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 中的选项 Api?

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

vue 3 data() not workink setup() working but why?

vuejs3

laravel-mix-vue3