Как исправить проблему «это не определено» в Vue

JavaScript Vue.js

Автор: Майкл Тиссен Переводчик: Front-end Xiaozhi Источник: техалист

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

Когда мы счастливо разрабатывали проект с Vue, мы неожиданно сообщили об ошибке:

this is undefined

Не волнуйтесь, вы не единственный, я тоже много раз сталкивался с этой проблемой, давайте посмотрим, как решить эту проблему.

Одна из возможных причин заключается в том, что вы путаете использование обычных функций и функций со стрелками. Если у вас есть эта проблема, я думаю, вы используете функции со стрелками. Если вы замените стрелочные функции обычными функциями, это может исправить это для вас.

Давайте копнем немного глубже и попробуем понять, почему это так.

В конце концов, знание — сила, и если мы будем знать, что вызывает проблемы, мы сможем избежать множества разочарований и напрасной траты времени в будущем.

Существуют и другие причины, по которым могут возникать такие ошибки.

  • использоватьfetchилиaxiosполучить данные
  • использовать что-то вродеlodashилиunderscoreтакие библиотеки

Понимание двух основных типов функций

В JS у нас есть два разных типа функций. Они работают почти одинаково, за исключением того, что по-разному обрабатывают переменные.

Это создает много путаницы для старых и новых разработчиков Javascript, но хорошо иметь эту путаницу, когда мы ее выясним.

обычная функция

Регулярные функции могут быть определены несколькими различными способами.

Первый метод менее распространен в компонентах Vue, потому что писать его дольше:

methods: {
  regularFunction: function() {
    // Do some stuff
  }
}

Второй метод является сокращенным, и мы также часто используем его:

methods: {
  shorthandFunction() {
    // Do some stuff
  }
}

В обычной функции, подобной этой,thisБудет ссылаться на «владельца» функции. Поскольку мы определяем его в компоненте Vue, поэтомуthisОтносится к компонентам Vue.

В большинстве случаев нам следует использовать обычные функции Vue, особенно при создании

  • methods
  • computed props
  • watched props

Хотя рутинные функции обычно являются то, что нам нужно, функция стрелки также очень удобна.

стрелочная функция

Стрелочные функции могут быть короче и быстрее писаться, поэтому в последнее время они приобрели большую популярность. Однако они не сильно отличаются при определении методов для объектов, как мы это делаем при написании компонентов Vue.

Вот как они выглядят на компонентах Vue:

methods: {
  arrowFunction: () => {
    // Do some stuff
  }
}

обработкаthisпроблема, когда реальная разница вступает в игру.

Стрелочные функции имеют лексическую область видимости, что означает, что стрелочная функция получает данные из своего контекста.this.

Если пытаться получить доступ изнутри функции стрелки на Vue компонентаthis, получит ошибку, потому чтоthisне существует

data() {
  return {
    text: 'This is a message',
  };
},
methods: {
  arrowFunction: () => {
    console.log(this.text);  // ERROR! this is undefined
  }
}

Короче говоря, старайтесь избегать использования стрелочных функций в компонентах Vue. Это избавит от головной боли и путаницы.

Иногда удобно использовать стрелочные функции, но только если вы не ссылаетесьthisдействует только в случае .

computed: {
  location: () => window.location,
}

Теперь, когда мы знаем два основных типа функций, как нам правильно их использовать?

анонимная функция

Анонимные функции полезны, когда нам просто нужно создать функцию, не вызывая ее откуда-либо еще.

Вот несколько сценариев использования анонимных функций.

  • использоватьaxiosилиfetchПолучить данные
  • filter,mapа такжеreduceМетод равных функций
  • в любом месте метода Vue

Давайте рассмотрим пример:

// Fetching data
fetch('/getSomeData').then((data) => {
  this.data = data;
});

// Functional methods
const array = [1, 2, 3, 4, 5];
const filtered = array.filter(number => number > 3);
const mapped = array.map(number => number * 2);
const reduced = array.reduce((prev, next) => prev + next);

Как видно из примера, большую часть времени, когда мы создаем анонимные функции, используются стрелочные функции. Обычно мы используем стрелочные функции по нескольким причинам.

  • Более короткий и лаконичный синтаксис
  • улучшить читаемость
  • Это взято из родительского класса

В методах Vue стрелочные функции также могут использоваться как анонимные функции.

подождите, мы не просто узнали, когда мы пытались посетитьthisФункция стрелки не работает?

В этом разница.

Когда мы используем стрелочные функции в обычных функциях или сокращенных функциях, обычные функции будутthisнастроен на наш компонент Vue, а функции стрелок другие.

Вот пример:

data() {
  return {
    match: 'This is a message',
  };
},
computed: {
  filteredMessages(messages) {
    console.log(this); // Vue
    
    const filteredMessages = messages.filter(
      // 引用我们的Vue组件
      (message) => message.includes(this.match)
    );
    
    return filteredMessages;
  }
}

filterспособ доступаthis.match, потому что стрелочная функция использует тот же метод, что иfilteredMessagesМетоды используются в одном контексте. Поскольку этот метод является обычной функцией (а не функцией стрелки), он устанавливает свой собственный контекст для экземпляра Vue.

Давайте обсудим далее, как использоватьaxiosилиfetchчтобы получить данные.

Используйте правильную функцию при извлечении данных

Если вы используетеfetchилиaxiosДля получения асинхронных данных лучше всего использоватьPromise.PromiseПодобно анонимным стрелочным функциям, они также облегчают обработкуthisПроблема становится намного проще.

Если вы получаете какие-то данные и хотите установить их в своем компоненте, это правильный способ сделать это:

export default {
  data() {
    return {
      dataFromServer: undefined,
    };
  },
  methods: {
    fetchData() {
      fetch('/dataEndpoint')
        .then(data => {
          this.dataFromServer = data;
        })
        .catch(err => console.error(err));
    }
  }
};

Обратите внимание, как мы используем обычные функции в качестве методов в компонентах Vue, а затем используем анонимные стрелочные функции внутри промисов.

.then(data => {
  this.dataFromServer = data;
})

существуетfetchData()По объему мы будемthisУстановите компонент Vue, так как это обычная функция. Поскольку стрелочные функции используют внешнюю область видимости как собственную область видимости, стрелочные функции также будутthisУстановите наш компонент Vue.

Это позволяет нам пройтиthisДоступ к компонентам Vue и обновлениеdataFromServer.

Однако, если вам нужно передать функцию вспомогательной библиотеке, напримерlodashилиunderscore,Что мы можем сделать по этому поводу

Используйте с Lodash или символом подчеркивания

Предположим, у нас есть компонент Vue в нашем компоненте Vue для использованияLodashилиUnderscoreметод. как предотвратитьthis is undefineошибка.

Если вы использовали React, вы, вероятно, видели что-то подобное.

Это то, что мы делаем с Vue.

created() {
  this.methodToDebounce = _.debounce(this.methodToDebounce, 500);
},
methods: {
  methodToDebounce() {
    // Do some things here
  }
}

Вот и все!

Все, что нам нужно сделать, это получить функцию, обернуть ее вdebounceфункция, затем возвращает встроенныйdebounceновая функция. Теперь, когда мы вызываем компонент Vuethis.methodToDebounce(), мы позвонимdebouncedВерсия.

что такое лексический объем

Как уже упоминалось, основная причина различия между обычными функциями и стрелочными функциями связана с лексической областью видимости. Проанализируем его значение.

Во-первых, область видимости — это любая область программы, в которой существует переменная. В Javascript переменная окна имеет глобальную область видимости, она доступна везде. Хотя большинство переменных ограничено функцией, в которой они определены, классом или модулем, к которому они принадлежат.

Во-вторых, слово «лексический» просто означает, что область действия определяется тем, как вы пишете свой код. Некоторые языки программирования определяют, что находится в области видимости, только при запуске программы. Это может сбивать с толку, поэтому в большинстве языков используется только лексическая область видимости.

Стрелочные функции используют лексическую область видимости, а обычные и сокращенные функции — нет.

Сложность здесь заключается в том, как лексическая область видимости влияет на функцию.this. Для стрелочных функцийthisс внешней областьюthisсвязаны вместе. обычная функцияthisПривязка немного странная, вот почему были введены стрелочные функции, и почему большинство людей используют стрелочные функции как можно чаще.

Как области работают в функциях

Вот несколько примеров, демонстрирующих, как область видимости работает по-разному между этими двумя типами функций.

// 此变量在 window 作用域内
window.value = 'Bound to the window';

const object = {
  // 此变量在 object 作用域内
  value: 'Bound to the object',
  arrowFunction: () => {
    console.log(this.value); // 'Bound to the window'
  },
  regularFunction() {
    console.log(this.value);  // 'Bound to the object'
  }
};

Привязать область действия к функции

Мы можем использовать метод связывания для измененияthisсвязывание

const boundFunction = unboundFunction.bind(this);

Это дает нам больше гибкости при написании компонентов Vue и упрощает повторное использование методов. Конечно, удобочитаемость относительно плохая, и вам следует стараться не использовать ее слишком часто.

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

оригинал:Ооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооочень плохой оригинал ecology.com/posts/v UE JS…

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории