Question

我有一些使用ES6箭头功能的Vue.js代码。然而，显然Safari（在一个案例中它似乎是OSX上的Chrome）并不是这样的。这是代码：

fetchItemCount: function(){
                this.$http.get('/api/fetchItemCount')
                    .then(response => {
                        this.itemCount = response.data;
                    })
                    .catch(response => {

                    });
            },

我有几个使用箭头语法的函数。我怎样才能重写它们以避免使用它但仍然执行相同的工作？

我尝试使用Babel来转换代码，但这似乎引入了错误（无法设置属性＆＃39; Vue＆＃39;未定义或空引用）

Answer 1

正如其他人已经注意到使用像巴贝尔这样的转换器可以做到这一点，但是因为这并不总是可行的，所以没有箭头功能它会如何看待。

fetchItemCount: function(){
    var that = this;
    this.$http.get('/api/fetchItemCount')
        .then(function(response) {
            that.itemCount = response.data;
        })
        .catch(function(response) {

        });
},

箭头函数给你的东西本质上是一个函数，它保持声明声明的this范围，所以要重现我们只需要在外部作用域中将this赋给一个新的变量，在函数内部使用它。

正如LinusBorg在评论中指出的那样，在使用vue-resource时，您不必执行var that = this;部分，因为库会将回调中的this更改为您的外部范围。这仅适用于vue-resource资源，而不是通常如何使用promises，因此它通常不适用于其他库。

Answer 2

实际上你需要重写你的代码，至少不需要手动重写。您可以做的是继续编写代码，例如您提供的示例，并使用转发器（如Babel）将ES6代码重写为ES5。

您可以使用Gulp或Grunt等任务管理器使自己几乎透明。

如果您需要了解如何使用任务管理器，请查看this article。它为您提供了关于如何使用Gulp的简短而专注的概述。

阅读之后，您将看到通过一些Gulp脚本自动观看文件和简化其内容是多么容易。因此，只需使用Gulp Babel plugin自动为您执行此转换任务。

例如：

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('transpile', () => {
    return gulp.src('src/MY-VUE-SOURCE.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('SOME_DESTINATION'));
});

gulp.task('watch', function() {
    gulp.watch(['src/**/*'], ['transpile']);
});

在运行gulp watch之后，它一直运行直到您手动停止它，您将自动转换为MY-VUE-SOURCE.js所做的任何更改。

如何将此ES6代码重写为与Safari兼容？

2 个答案: