Vue 中 JS 代码的放置位置

在 Vue 开发中，合理放置 JS 代码至关重要，它不仅影响代码的可读性，还关乎项目的可维护性与性能。

首先是内联 JavaScript 代码。在 Vue 模板中，可通过 v-on 指令绑定内联语句。例如：<button v-on:click="counter++">Click me</button>，这里的 counter++ 就是内联 JS 代码。这种方式简单直接，适用于简短逻辑，如简单的变量操作或调用组件内的方法。但内联代码过多会使模板变得臃肿，不利于代码复用与维护，因此只应在逻辑极其简单时使用。

组件的 script 标签是放置 JS 代码的主要位置之一。在 script 标签内，我们定义组件的各种选项，如 data、methods、computed 等。data 函数返回组件的初始数据，methods 中定义方法，computed 用于定义计算属性。例如：

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
}

这种方式使组件的逻辑集中管理，增强了代码的可读性与可维护性。

对于复用性较高的逻辑代码，可将其提取到独立的 JS 文件中，然后在组件内导入使用。比如创建一个工具函数文件 utils.js：

export function formatDate(date) {
  return date.toISOString().split('T')[0];
}

在组件中导入使用：

import { formatDate } from './utils.js';
export default {
  methods: {
    displayDate() {
      const today = new Date();
      console.log(formatDate(today));
    }
  }
}

这样做提高了代码的复用性，避免在多个组件中重复编写相同逻辑。

在 Vue 项目中还有全局的 JS 代码放置位置。例如在 main.js 中，可进行全局配置、注册全局组件与指令等操作。如：

import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
  render: h => h(App),
}).$mount('#app');

在 Vue 开发里，根据代码的功能与复用性，合理选择 JS 代码的放置位置，能打造出结构清晰、易于维护与扩展的优质项目。