将 vue 1 迁移到 vue 2

Question

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

<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，但它仍然无法正常工作。问题是，它甚至不会在控制台中吐出错误消息。

Answer 1

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

可能没有理由在data块中定义Slider(它不需要是反应式的(，只需在mounted钩子中初始化它：

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

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

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

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

Answer 2

这是因为挂载不支持函数，您必须在方法中创建函数并从挂载中调用它。