Vue.js 的服务是指将程序中需要频繁使用、需要公用的代码进行抽离封装到一个单独的文件中,并在需要引用的地方进行调用的一种方式。使用服务可以方便的在多个组件中复用代码,并且更加方便的对代码进行维护和管理。
Vue.js 提供了一个特别的服务工具,用于定义自己的服务。在 Vue.js 中可以通过 Vue.mixin 全局混入或者在 Vue 实例中单独进行定义。如果需要使用自己定义的服务,只需要在组件中进行导入即可。
// 定义服务 const myService = { data: () =>({ count: 0 }), methods: { addCount() { this.count++ } } } // 在 Vue 中进行注册 Vue.mixin({ myService }) // 在组件中进行调用 export default { mixins: ['myService'], mounted() { this.addCount() } }
除此之外,Vue.js 也内置了一些服务可以在组件中进行引用和使用,这些内置服务包括 $set、$delete、$watch、$emit 等。
使用 $set 和 $delete 可以实现自己定义的对象进行响应式,以前可能会在数据中使用 null 代表没有数据的情况,但在 Vue.js 中推荐使用 $set 和 $delete 来进行操作。
export default { data() { return { list: [ { id: 1, name: 'Tom' }, { id: 2, name: 'Jenny' } ] } }, created() { // $set 用法 this.$set(this.list[0], 'age', 25) // $delete 用法 this.$delete(this.list[1], 'name') } }
使用 $watch 可以实现对数据的监听,在数据变化时进行相应的操作。
export default { data() { return { message: 'Hello, Vue.js' } }, created() { // watch 用法 this.$watch('message', (newValue, oldValue) =>{ console.log(`新的值:${newValue},旧的值:${oldValue}`) }) } }
使用 $emit 可以实现组件之间的通信,将事件从子组件传递给父组件,并且可以传递参数。
// 子组件发送事件 export default { methods: { handleClick() { this.$emit('change', 'new value') } } } // 父组件的模板使用监听事件并接收参数export default { methods: { handleChange(value) { console.log(value) // 'new value' } } }
总之,Vue.js 中的服务可以方便的封装和管理代码,并且内置的一些服务可以解决常见的问题,使用服务可以让我们的代码更加规范、易于维护。