vue怎么使用自己写的js

Vue使用自己写的JS的方式包括：在Vue组件中引入JS文件、在Vue实例方法中使用、全局引入。这些方法各有优缺点和适用场景。接下来，我们将详细介绍其中的一种方式：在Vue组件中引入JS文件，并且演示如何在Vue组件的生命周期中使用自定义的JS函数。

一、在VUE组件中引入JS文件

在Vue组件中引入自定义JS文件是最常见的方式之一，通常通过import语句将自定义的JS文件引入到需要的Vue组件中。

引入和使用自定义JS文件

创建自定义JS文件：首先，在你的项目目录中创建一个名为myFunctions.js的文件，写入以下内容：

// myFunctions.js
export function sayHello() {
    console.log("Hello from myFunctions.js!");
}
export function add(a, b) {
    return a + b;
}

引入到Vue组件中：在你的Vue组件文件中，通过import语句引入刚刚创建的JS文件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="greet">Greet</button>
    <p>Sum: {{ sum }}</p>
  </div>
</template>
<script>
import { sayHello, add } from '../path/to/myFunctions.js';
export default {
  data() {
    return {
      message: 'Hello Vue!',
      sum: 0
    };
  },
  methods: {
    greet() {
      sayHello();
    },
    calculateSum(a, b) {
      this.sum = add(a, b);
    }
  },
  mounted() {
    // 调用自定义JS函数
    this.greet();
    this.calculateSum(5, 3);
  }
};
</script>

Vue组件生命周期中的使用

在Vue组件的生命周期中使用自定义JS函数，可以在组件挂载、更新或销毁时调用这些函数。例如，在上述代码中，我们在mounted钩子函数中调用了自定义的greet和calculateSum方法。这意味着当组件挂载到DOM上时，这些方法会自动执行。

二、在VUE实例方法中使用自定义JS

除了在组件中引入自定义JS文件外，我们还可以在Vue实例方法中使用自定义JS函数。这样做的好处是可以在整个Vue实例范围内复用这些函数。

在Vue实例方法中引入和使用

创建自定义JS文件：和前面一样，先创建一个自定义的JS文件：

// utils.js
export function formatDate(date) {
    return new Date(date).toLocaleDateString();
}

在Vue实例方法中引入：

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

在组件中使用：

<template>
  <div>
    <p>Formatted Date: {{ formattedDate }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: '2023-10-05',
      formattedDate: ''
    };
  },
  mounted() {
    this.formattedDate = this.$formatDate(this.date);
  }
};
</script>

使用实例方法的优点

在Vue实例方法中引入自定义JS函数，可以让这些函数在所有组件中通过this关键字访问。这种方式适合那些需要在多个组件中频繁使用的函数，例如格式化日期、数字处理等常用工具函数。

三、全局引入自定义JS

如果某些自定义JS函数需要在整个项目中全局使用，可以选择将其全局引入。这样，不论在哪个组件中，都可以直接调用这些函数。

全局引入和使用

创建自定义JS文件：

// globalFunctions.js
export function logMessage(message) {
    console.log(message);
}

在入口文件中引入：

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

在组件中使用：

<template>
  <div>
    <button @click="log">Log Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    log() {
      this.$logMessage('Hello from global function!');
    }
  }
};
</script>

全局引入的应用场景

全局引入自定义JS函数适用于那些需要在项目中广泛使用的功能，例如日志记录、全局状态管理等。这种方式可以减少重复代码，提高开发效率。

四、使用插件方式引入自定义JS

除了上述方法外，还可以将自定义JS函数封装成Vue插件，通过插件的形式引入。这种方式适合那些功能复杂、需要在多个项目中复用的自定义JS函数。

封装成插件

创建插件文件：

// myPlugin.js
const MyPlugin = {
  install(Vue) {
    Vue.prototype.$myMethod = function (methodOptions) {
      console.log('MyPlugin method called with options:', methodOptions);
    };
  }
};
export default MyPlugin;

在入口文件中引入插件：

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

在组件中使用插件方法：

<template>
  <div>
    <button @click="usePlugin">Use Plugin Method</button>
  </div>
</template>
<script>
export default {
  methods: {
    usePlugin() {
      this.$myMethod({ someOption: 'someValue' });
    }
  }
};
</script>

插件方式的优点

通过插件的方式引入自定义JS函数，可以将复杂的功能模块化，方便在多个项目中复用。插件还可以提供安装选项，让用户自定义插件的行为。

总结

在Vue项目中使用自己写的JS有多种方式，包括在Vue组件中引入、自定义实例方法、全局引入和插件方式。每种方式都有其优缺点和适用场景，开发者可以根据项目需求选择合适的方式。在实际项目中，通常会结合多种方式使用，以达到最佳的开发效果。

推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，以提高团队协作效率和项目管理水平。