vue3中js方法怎么引入

在Vue 3项目中引入JS方法有多种方式，最简单的解决方案是通过<script setup>语法或组合式API（Composition API）来引入和使用JavaScript方法。下面将几种常见且实用的方法。

一、直接定义在中

对于单文件组件（.vue文件），可以直接在<script setup>标签内定义方法。

vue

  <button>Say Hello</button>
</p>


// 定义一个简单的方法
function sayHello() {
  console.log('Hello, Vue 3!');
}


<p>

这种方式适用于组件内部使用的方法，简洁明了，不需要额外的导入操作。

二、从其他文件导入方法

当方法较为复杂或者多个组件要共享方法时，可以将其封装到单独的js文件中然后导入。

创建一个名为methods.js的文件，在其中定义一些工具方法：

javascript
// methods.js
export function formatPrice(price) {
  return '￥' + price.toFixed(2);
}</p>

<p>export function validateEmail(email) {
  const re = /S+@S+.S+/;
  return re.test(email);
}

然后在Vue组件中导入并使用这些方法：

vue

  <div>
    <p>{{ formattedPrice }}</p>
    
    <p>邮箱格式不正确</p>
  </div>
</p>


import { ref, computed } from 'vue';
import { formatPrice, validateEmail } from './methods.js';

const price = 123.456;
const email = ref('');
const formattedPrice = formatPrice(price);

const isValidEmail = computed(() => validateEmail(email.value));


<p>

三、使用组合式API中的use函数

如果有一些逻辑需要复用并且涉及到响应式数据等Vue特性，可以创建自定义的组合式函数。

新建useUtils.js文件：

javascript
// useUtils.js
import { ref, computed } from 'vue';</p>

<p>export function useCounter(initialValue = 0) {
  const count = ref(initialValue);</p>

<p>function increment() {
    count.value++;
  }</p>

<p>function decrement() {
    count.value--;
  }</p>

<p>const doubleCount = computed(() => count.value * 2);</p>

<p>return { count, increment, decrement, doubleCount };
}

在组件中使用：

vue

  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button>Increment</button>
    <button>Decrement</button>
  </div>
</p>


import { useCounter } from './useUtils.js';

const { count, increment, decrement, doubleCount } = useCounter(5);


<p>

以上就是在Vue 3中引入JS方法的一些常用方式，根据实际需求选择合适的方法可以使代码更加清晰、易于维护。