Vue xstream是一個結合了Vue和xstream的工具，使得在Vue應用中使用可觀察流更加簡單直觀。下面將通過一個例子來介紹如何使用Vue xstream繪制地球。

首先，需要安裝Vue和xstream：

npm install vue@next xstream

接下來，創建一個Vue實例：

const app = Vue.createApp({});

為了繪制地球，需要載入一個地球圖片：

const earthImage = new Image();
earthImage.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/640px-The_Earth_seen_from_Apollo_17.jpg';

然后，在created鉤子函數中創建一個xstream流，每隔16毫秒發出一個事件，更新地球的旋轉角度：

app.created = function () {
const earthRotation$ = xstream.periodic(16).map(i =>i / 1000);
};

在模板中，使用canvas標簽顯示地球圖片，并且使用xstream流中的地球旋轉角度來讓地球每隔16毫秒旋轉一定的角度：

app.template = ``;
app.mount('#app');
const canvas = app.$refs.canvas;
const ctx = canvas.getContext('2d');
earthImage.onload = function () {
canvas.width = earthImage.width;
canvas.height = earthImage.height;
};
earthRotation$.addListener({
next: function (angle) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle);
ctx.translate(-canvas.width / 2, -canvas.height / 2);
ctx.drawImage(earthImage, 0, 0);
}
});

到目前為止，完成了一個旋轉的地球的效果。當然，還可以添加更多的交互和效果來增強這個應用。Vue xstream為Vue應用提供了更靈活，更容易理解的可觀察流機制。