vue.js - 将 vue 1 迁移到 vue 2

Question

我有一个在 Vue 1.x 下运行良好的工作脚本，但它不适用于 Vue 2.x，即使我已将 ready 替换为 mounted

<div id="app">
    <div id="slider"></div>
    <input id="slider-input" v-model="third" v-on:change="updateSlider"/>
    <input id="slider-input" v-model="fourth" v-on:change="updateSlider"/>
</div>

Vue 1.x:

    var vue = new Vue({
  el: '#app',
  data: {
    first: 3,
    second: 2,
    third: 40,
    fourth: 60,
    slider: {
      min: 0,
      max: 100,
      start: [50, 60],
      step: 1
    },
    Slider: document.getElementById('slider')
  },
  computed: {
    total: function total() {
      return parseInt(this.first) * parseInt(this.second) * parseInt(this.third);
    }
  },
  methods: {
    updateSlider: function updateSlider() {
      this.Slider.noUiSlider.set(this.third);
    }
  },
  ready: function ready() {
    noUiSlider.create(this.Slider, {
      start: this.slider.start,
      step: this.slider.step,
      range: {
        'min': this.slider.min,
        'max': this.slider.max
      }
    });
  }
});

现在我已经将 ready 替换为 mounted 但它仍然无法正常工作。问题是，它甚至没有在控制台中吐出错误消息。

Answer 1

我的猜测是 <div id="slider">一旦 Vue 编译了完整的模板并呈现了自身(挂载后)，模板中的元素将被替换为不同的元素实例。我的意思是，在mounted Hook ，this.Slider和 document.getElementById('slider')不再引用相同的元素(this.Slider 已从 DOM 中删除)。

可能没有理由 Slider在 data 中定义 block (它不需要是 react 性的)，只需在 mounted 中初始化它 Hook :

mounted() {
  this.Slider = document.getElementById('slider')
  noUiSlider.create(this.Slider, ...)
}

实际上，更好的方法是使用 ref获取元素的实例而不是查询 DOM:

<div ref="slider"></div>

mounted() {
  noUiSlider.create(this.$refs.slider, ...)
}