vue3methods写法

在 Vue 3 中，methods 的写法与 Vue 2 中有些不同。下面是一个示例：

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};
</script>

在 setup 函数中，我们使用 `ref` 创建了一个响应式数据 `count`。然后我们定义了一个 `increment` 函数，用于将 `count` 值加 1。最后，我们通过 `return` 语句将 `count` 和 `increment` 暴露给模板使用。

需要注意的是，在 Vue 3 中，我们使用 `ref` 和 `reactive` 来创建响应式数据。而且，我们不再需要使用 `data` 函数来声明数据。此外，在模板中，我们也不再需要使用 `this` 来访问数据和方法，而是直接使用变量名即可。

相关问题

vue methods写法

Vue中的methods属性用于定义组件中的方法。基本语法是在Vue实例的methods属性中以键值对的形式定义方法，方法名作为键，方法体作为值。示例代码如下：

var vm = new Vue({
  methods: {
    方法名: function() {
      // 方法体
    }
  }
});

在Vue 2中，初始化时会解析并重新定义methods中的方法的引用，同时修改调用函数时的上下文环境，将this指向Vue实例。

示例代码如下：

function initMethods(vm, methods) {
  for (const key in methods) {
    vm[key] = typeof methods[key] !== 'function' ? noop : methods[key].bind(vm);
  }
}

例如，我们可以在methods中定义一个名为show的方法：

methods: {
  show: function() {
    console.log("显示内容");
  }
}

在方法中可以访问组件的属性。

vue3的写法

Vue3相比于Vue2，在语法和使用上有很多变化，下面是一个简单的Vue3示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">+1</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue3!',
      counter: 0
    })

    const incrementCounter = () => {
      state.counter += 1
    }

    return {
      message: state.message,
      incrementCounter
    }
  }
}
</script>

在Vue3中，我们使用了`setup()`函数来替代Vue2中的`data`和`methods`选项。`setup()`函数返回一个对象，这个对象包含了组件中需要用到的数据和方法。在这个例子中，我们使用`reactive()`来创建一个响应式的数据对象`state`，并将`message`和`incrementCounter`方法暴露出去。

在模板中，我们可以像Vue2一样使用双括号语法来渲染数据，使用`@`符号来绑定事件。