javascript - Vue.js 组件模型更新

Question

我是 Vue 框架的新手，我需要创建具有实时 BTC/LTC/XRP 价格的可重用组件

对于实时价格，我使用 Bitstamp websockets API。这是 jQuery 的示例用法 - 运行此代码段，是真实存在的。

var bitstamp = new Pusher('de504dc5763aeef9ff52')
var channel = bitstamp.subscribe('live_trades')
            
channel.bind('trade', function (lastTrade) {
  $('p').text(lastTrade.price)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/4.1.0/pusher.min.js"></script>

<h3>BTC/USD price</h3>
<p>loading...</p>

如您所见，它非常简单。但是，我需要使用 Vue.js 组件。所以我创建了这个，它也功能齐全:

var bitstamp = new Pusher('de504dc5763aeef9ff52')

Vue.component('live-price', {
  template: '<div>{{price}}</div>',
  data: function () {
    return {
      price: 'loading...'
    }          
  },
  created: function () {
    this.update(this)
  },
  methods: {
    update: function (current) {
      var pair = current.$attrs.pair === 'btcusd'
        ? 'live_trades'
        : 'live_trades_' + current.$attrs.pair
      var channel = bitstamp.subscribe(pair)

      channel.bind('trade', function (lastTrade) {
        current.price = lastTrade.price
      })
    }
  }
})

new Vue({
  el: '.prices'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/4.1.0/pusher.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>

<section class="prices">
  <live-price pair="btcusd"></live-price>
  <live-price pair="ltcusd"></live-price>
  <live-price pair="xrpusd"></live-price>
</section>

但是，有很大的BUT。我是否以正确的方式使用 Vue？哪里是运行 Pusher 的理想场所？在“创建”或“安装”方法中？在“计算”中？在“看”？或者在哪里？我做对了吗？我真的不知道，我是从 Vue 开始的……今天 :(

Answer 1

第一天使用 Vue 看起来不错!我只想做一些改变。

• 该组件正在伸出并使用全局位戳。通常对于组件，您希望它们是独立的，而不是为了获取值而超出自身范围。为此，将套接字声明为可以传递给组件的属性。
• 同样，pair 作为属性传入，但您无需声明它，而是使用 current.$attrs.pair 获取该对。但这并不是很明确，并且让其他人更难使用该组件。此外，通过将其设为属性，您可以使用 this.pair 引用它。
• 当使用诸如套接字之类的东西时，您应该始终记得在使用完后清理。在下面的代码中，我添加了 unsubscribe 方法来执行此操作。 beforeDestroy 是处理此类事情的典型生命周期 Hook 。
• 计算属性对于计算从您的组件数据派生的值很有用:您订阅的 channel 是一个计算属性。您并不是真的需要这样做，但通常这是一种很好的做法。
• Vue 只能绑定(bind)到单个 DOM 元素。您使用的类 .prices 在这种情况下有效，因为该类只有一个元素，但可能会产生误导。
• 最后，created 是开始订阅的好地方。

console.clear()
var bitstamp = new Pusher('de504dc5763aeef9ff52')

Vue.component('live-price', {
  props:["pair", "socket"],
  template: '<div>{{price}}</div>',
  data() {
    return {
      price: 'loading...',
      subscription: null
    }          
  },
  created() {
    this.subscribe()
  },
  beforeDestroy(){
    this.unsubscribe()
  },
  computed:{
    channel(){
      if (this.pair === 'btcusd')
        return 'live_trades'
      else
        return 'live_trades_' + this.pair
    }
  },
  methods: {
    onTrade(lastTrade){
      this.price = lastTrade.price
    },
    subscribe() {
      this.subscription = this.socket.subscribe(this.channel)
      this.subscription.bind('trade', this.onTrade)
    },
    unsubscribe(){
      this.subscription.unbind('trade', this.onTrade)
      this.socket.unsubscribe(this.channel)
    }
  }
})

new Vue({
  el: '#prices',
  data:{
    socket: bitstamp
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/4.1.0/pusher.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>

<section id="prices">
  <live-price pair="btcusd" :socket="bitstamp"></live-price>
  <live-price pair="ltcusd" :socket="bitstamp"></live-price>
  <live-price pair="xrpusd" :socket="bitstamp"></live-price>
</section>