淘先锋技术网

首页 1 2 3 4 5 6 7

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 中的服务可以方便的封装和管理代码,并且内置的一些服务可以解决常见的问题,使用服务可以让我们的代码更加规范、易于维护。