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 中的服務可以方便的封裝和管理代碼,并且內置的一些服務可以解決常見的問題,使用服務可以讓我們的代碼更加規范、易于維護。
上一篇vue 中的指令
下一篇vue 響應式 雙向