Несколько проблем в процессе практики Vue

внешний интерфейс API Vue.js vue-router

предисловие

Эта статья - несколько небольших проблем, с которыми я столкнулся в процессе использования vue, и вещи, которые я не понимал раньше. Я записал ее и надеялся помочь вам ступить на яму. Если вам это нравится, вы можете поставить лайк, или обратить внимание.Я надеюсь, что эта статья может помочь вам.

Эта статья была впервые опубликована в моем личном блоге:obkoro1.com

Проблемы, встречающиеся в этой статье, следующие:

  1. Данные страницы изменения маршрута не обновляют проблему
  2. setTimeout/setInterval указывает на изменение, не может использовать это для доступа к экземпляру VUe
  3. Переход по маршруту setInterval продолжает выполняться и не уничтожается
  4. Использование поведения прокрутки Vue (местоположение резервной памяти браузера)
  5. Маршрутизация Vue перехватывает браузер обратно, чтобы выполнить аналогичные требования для сохранения черновиков.
  6. v-once рендерит элементы и компоненты только один раз, оптимизируя производительность рендеринга обновлений.
  7. vue-фреймворкгид по стилюрекомендовать

Данные страницы изменения маршрута не обновляют проблему

Сценарий: например, подробные данные о статье, которые зависят от маршрутизации.paramsПараметры получены (ajax прописан в созданном жизненном цикле), из-за ленивой загрузки роутинга выход со страницы и последующий вход на другую страницу статьи не запустит жизненный цикл созданного компонента, в результате чего данные статьи остаются данными предыдущей статьи.

Решение: следите за изменением маршрута

 watch: {
  '$route' (to, from) { //监听路由是否变化
    if(this.$route.params.articleId){//是否有文章id
      //获取文章数据
    }
  }
}

setTimeout/setInterval указывает на изменение, не может использовать это для доступа к экземпляру VUe

Сцены:

  mounted(){ 
        setTimeout(function () { //setInterval同理 
          console.log(this);//此时this指向Window对象
        },1000);
    }

Обходной путь: используйте функции стрелок или

    //箭头函数访问this实例 因为箭头函数本身没有绑定this
     setTimeout(() => { 
       console.log(this);
    }, 500);
    //使用变量访问this实例
    let self=this;
        setTimeout(function () {  
          console.log(self);//使用self变量访问this实例
        },1000);

Переход по маршруту setInterval продолжает выполняться и не уничтожается

Сцены:

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

Решение: остановить setInterval в жизненном цикле компонента перед уничтожением.

Функция-ловушка, выполняемая перед уничтожением компонента, аналогична другим функциям-ловушкам жизненного цикла.

beforeDestroy(){
     //我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么暂停。
    clearInterval(this.intervalid);
},

Использование поведения прокрутки Vue (местоположение резервной памяти браузера)

Когда я это делал, я думал, что это сложно, но после того, как я это сделал, я обнаружил, что это просто настройка (предпосылка заключается в том, что режим маршрутизации «История» должен быть включен) Вот простой обмен.

настройки маршрутизации

  1. Чтобы использовать эту функцию, вам сначала нужно включить vue-routerрежим истории

Если вы использовалиhashрежим (режим по умолчанию), проект разрабатывался в течение определенного периода времени, а затем при переключении в режим истории, скорее всего, возникнут:эти вопросы

  1. Конкретные настройки поведения прокрутки следующие:

     const router = new VueRouter({
   mode: 'history',
 scrollBehavior (to, from, savedPosition) {
     if (savedPosition) { //如果savedPosition存在，滚动条会自动跳到记录的值的地方
       return savedPosition
     } else {
       return { x: 0, y: 0 }//savedPosition也是一个记录x轴和y轴位置的对象
      }
     }，
   routes: [...]
 })

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

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

Сцены:

Чтобы пользователь не ушел внезапно, введенная информация не сохраняется.

использование:

//在路由组件中：
mounted(){
},
beforeRouteLeave (to, from, next) {
  if(用户已经输入信息){
    //出现弹窗提醒保存草稿，或者自动后台为其保存
    
  }else{
    next(true);//用户离开
  }

Похожие такжеbeforeEach,beforeRouteUpdate, также разделенный на глобальные хуки и хуки компонентов, см.документация по маршрутизации.

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

Чувствоватьv-onceЭтому апи вполне 6, и многие друзья не должны были заметить этот апи.

Введение в документацию:

v-once文档介绍

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

ДокументацияРекомендуется: используйте v-once для статических компонентов с низкими накладными расходами.

Хотя рендеринг HTML в Vue выполняется быстро, когда компоненты содержат много статического контента, рассмотрите возможность использования v-once для кэширования результатов рендеринга, например:

Vue.component('terms-of-service', {
  template: '\
    <div v-once>\
      <h1>Terms of Service</h1>\
      ...很多静态内容...\
    </div>\
  '
})

Руководство по стилю vue рекомендует:

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

vue风格指南

резюме

Выше приведены несколько небольших проблем, которыми я поделился, надеюсь, вы сможете что-то извлечь из этого! Другой: Я планирую поехать в Шанхай в следующем году.Если у компании моего партнера есть дыра, вы можете связаться со мной.

Наконец: Если вам нужно перепечатать, пожалуйста, поставьте ссылку на оригинальный текст и подпишите его. Кодировать не просто,благодарныйслужба поддержки! Я пишу статью с менталитетом биржевых записей, и не хочу ее рвать, но приветствую подсказки. Тогда я надеюсь, что друзья, которые прочитают это, кликнуткак, также можнообрати внимание наПроверить меня.личный блог and Персональная домашняя страница Nuggets

Выше 2018.1.17

Категории