DOM 要配合 RxJS，直覺都會使用 v-stream 配合 DOM Event，事實上也能使用 watchAsObservable() 朝 data 下手。
Version
macOS Catalina 10.15.4
WebStorm 2020.1
Vue 2.6.11
RxJS 6.5.5
V-model
只有 Number 才會寫入 message data，String 不會。
<template>
<div>
<input type="text" v-model.number="message">
{{ message }}
</div>
</template>
<script>
export default {
name: 'app',
data: () => ({
message: ''
})
}
</script>
第 3 行
<input type="text" v-model.number="message">
只要在 v-model 加上 number modifier，Vue 只會讓 Number 進入 data。
RxJS
<template>
<div>
<input type="text" v-model.number="message">
{{ output$ }}
</div>
</template>
<script>
import { pluck } from 'rxjs/operators'
let subscriptions = function() {
let output$ = this.$watchAsObservable('message').pipe(
pluck('newValue')
)
return { output$ }
}
export default {
name: 'app',
data: () => ({
message: ''
}),
subscriptions
}
</script>
12 行
let output$ = this.$watchAsObservable('message').pipe(
pluck('newValue')
)
v-model.number 雖然好用，但要如何配合 RxJS 呢 ?
使用 this.$watchAsObservable() 將 data 轉成 Observable，就可繼續使用 RxJS 了。
Conclusion
v-model.number讓 data 只接受 Number，RxJS 可透過watchAsObservable()繼續使用此好用特性