在vue里怎么写的js

在Vue里写JS的主要方式包括：在methods中定义方法、在computed中定义计算属性、在watch中定义监听器、在生命周期钩子中使用。其中，methods 用于定义响应事件的函数，computed 用于定义依赖于响应式数据的计算属性，watch 用于监听数据变化并执行相应操作。下面将详细介绍这些方式。

一、Vue中的methods

1. 定义和使用方法

在Vue组件中，methods属性用于定义各种方法，这些方法可以在模板中通过事件绑定来调用。常见的事件绑定有v-on指令和简写形式@。

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
};
</script>

2. methods的特点

不缓存：每次重新渲染组件时，methods中的方法都会被重新调用。
可以传参：methods中的方法可以接受参数，通过模板中的事件绑定传递。

<template>
  <div>
    <button @click="sayHello('World')">Say Hello</button>
  </div>
</template>
<script>
export default {
  methods: {
    sayHello(name) {
      console.log(`Hello, ${name}!`);
    }
  }
};
</script>

二、Vue中的computed

1. 定义和使用计算属性

computed属性用于定义计算属性，计算属性依赖于响应式数据，并且会缓存其结果，只有当依赖的数据发生变化时，才会重新计算。

<template>
  <div>
    <p>{{ reversedMessage }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!'
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

2. computed的特点

缓存：计算属性的结果会被缓存，只有在依赖的数据发生变化时才会重新计算。
不接受参数：计算属性不接受参数，因为它们依赖于组件的状态。

三、Vue中的watch

1. 定义和使用监听器

watch属性用于监听数据的变化，并在变化时执行相应的操作。可以监听组件的data、props以及计算属性。

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!'
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    }
  }
};
</script>

2. watch的特点

异步执行：watch中的回调函数是异步执行的。
可以处理复杂逻辑：watch适用于需要在数据变化时执行复杂逻辑的场景。

四、Vue中的生命周期钩子

1. 常见生命周期钩子

Vue组件有一系列的生命周期钩子，这些钩子函数会在组件的不同生命周期阶段被调用。常见的生命周期钩子包括created、mounted、updated和destroyed。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!'
    };
  },
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  updated() {
    console.log('Component updated');
  },
  destroyed() {
    console.log('Component destroyed');
  }
};
</script>

2. 生命周期钩子的特点

钩子函数：生命周期钩子是特殊的钩子函数，会在组件的特定生命周期阶段自动调用。
执行顺序：生命周期钩子的执行顺序是固定的，从beforeCreate到destroyed依次执行。

五、在Vue中引入外部JS库

1. 使用`import`引入

在Vue组件中，可以使用import语句引入外部JS库。例如，引入lodash库：

<template>
  <div>
    <p>{{ uniqueArray }}</p>
  </div>
</template>
<script>
import _ from 'lodash';
export default {
  data() {
    return {
      array: [1, 2, 2, 3, 4, 4, 5]
    };
  },
  computed: {
    uniqueArray() {
      return _.uniq(this.array);
    }
  }
};
</script>

2. 使用`require`引入

在Vue项目中，也可以使用require语句引入外部JS库。例如，引入moment库：

<template>
  <div>
    <p>{{ formattedDate }}</p>
  </div>
</template>
<script>
const moment = require('moment');
export default {
  data() {
    return {
      date: new Date()
    };
  },
  computed: {
    formattedDate() {
      return moment(this.date).format('YYYY-MM-DD');
    }
  }
};
</script>

六、在Vue中使用ES6语法

1. 使用箭头函数

在Vue组件中，可以使用ES6的箭头函数定义方法。箭头函数不会绑定this，它会继承外层作用域的this。

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick: () => {
      console.log('Button clicked!');
    }
  }
};
</script>

2. 使用解构赋值

在Vue组件中，可以使用ES6的解构赋值从对象或数组中提取数据。

<template>
  <div>
    <p>{{ firstName }} {{ lastName }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe'
      }
    };
  },
  computed: {
    fullName() {
      const { firstName, lastName } = this.user;
      return `${firstName} ${lastName}`;
    }
  }
};
</script>

七、在Vue中使用模块化

1. 分离组件

在大型Vue项目中，推荐将组件分离到单独的文件中，以提高代码的可维护性。

// src/components/MyButton.vue
<template>
  <button @click="handleClick">Click me</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
};
</script>
// src/App.vue
<template>
  <div>
    <MyButton />
  </div>
</template>
<script>
import MyButton from './components/MyButton.vue';
export default {
  components: {
    MyButton
  }
};
</script>

2. 使用Vuex进行状态管理

在大型Vue项目中，推荐使用Vuex进行全局状态管理。Vuex提供了一个集中式的存储，用于管理应用的所有组件的状态。

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
  render: h => h(App),
  store
}).$mount('#app');
// src/App.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

通过上述示例和解释，希望能帮助你更好地理解在Vue中编写JavaScript代码的方法和技巧。这些方式不仅能让你的代码更简洁、更易维护，还能充分利用Vue的响应式特性和强大的生态系统。