Вы заслуживаете этих навыков vue

Vue.js
Вы заслуживаете этих навыков vue
Привет всем, яКагуя такая милая. В этой статье в основном приводится краткое изложение навыков разработки, которые я накопил в разработке Vue, некоторые из которых будут использоваться в сочетании со средой или моим личным веб-сайтом (www.cooldream.fun/home) примеры использования…!

1. Динамические компоненты<component :is='组件名'></component>

Используйте с циклом v-for

  • Использовать среду

    Как показано на рисунке, это список v- для рендеринга (только этот раздел только начался, в данный момент есть только один), кружок - это компонент, то есть v- для динамических компонентов

image

  • фактическое использование

В начале основные компоненты были введены.

import ColorIn from '@/components/Magic/ColorIn.vue'
import LineIn from "@/components/Magic/LineIn.vue";
import LineIn from "@/components/Magic/Header.vue";
import LineIn from "@/components/Magic/Footer.vue";

export default{
      components:{
        ColorIn,
        LineIn,
        Header,
        Footer
    }
}

Далее идет использование динамического v-для динамических компонентов,componentList:['ColorIn','LineIn','Header','Footer']Используйте следующий код, чтобы зациклить код последовательно

<component v-for="(item,index) in componentList" :key="index" :is="item"></component>

Эффект после компиляции

<ColorIn></ColorIn>
<LineIn></LineIn>
<Header></Header>
<Footer></Footer>

2. Расширенное использование часов

выполнить немедленно

  • Использовать среду

Например, сценарий состоит в том, чтобы вызвать данные списка извлечения, как только страница появится.getList(), а затем прослушайте маршрут$route.query.idЗатем инициируйте обновление данных списка

  • фактическое использование

Для того, чтобы он выполнялся с самого начала, нам нужноcreated()Метод выполнения извлечения данных в жизненном цикле

watch:{
    '$route.query.id':{
        handle(){
            this.getList();
        },
    }
},
created(){
    this.getList();
},

но использоватьimmediateЕго можно выполнить сразу, а код после перезаписи выглядит следующим образом

watch:{
    '$route.query.id':{
        handle(){
          this.getList();
        },
        immediate:true
    }
},

Глубокое слушание

  • Использовать среду

При наблюдении за объектом внутреннее свойство объекта меняется и часы не могут его контролировать, в этом случае нужно использовать глубокий мониторинг, подробности в этом моем блогеСерия Vue from small to the deep (2) Подробный просмотр слушателя

  • фактическое использование

Просто нужно установитьdeep:trueСлушатель открытой глубины

data(){
    return{
        queryList:{
            count:0,
            name:'',
        }
    }
},
watch:{
    queryList:{ 
        handle(newValue,oldValue){ 
        //do something 
        }, 
        deep:true
    }
},

Задатель вычисляемых свойств

  • фактическое использование

Мы обычно используемgetter, а на самом деле имеетsetter, когда вычисляемое свойствоfullNameКогда запускается обновление, оно запускаетсяsetterПодробнее о обратных вызовах и вычисляемых свойствах см. в этом моем блоге.Vue от мелкой к более глубокой серии (3) Подробное объяснение вычислительных свойств вычислений

data(){
    return{
        firstName:'',
        lastName:'',
    }
},
computed:{
    fullName:{
        get(){
            return `${this.firstName} ${this.lastName}`;
        },
        set(newValue){
            let names=newValue.split(' ');
            this.firstName=names[0];
            this.lastName=names[1];
        }
    }
},

$on('hook: жизненный цикл') для упрощения мониторинга окна

  • фактическое использование

Давайте посмотрим, как его использовать в обычном режиме.

mounted () {
    window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy () {
    window.removeEventListener('resize', this.resizeHandler);
}

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

mounted () {
  window.addEventListener('resize', this.resizeHandler);
  this.$on("hook:beforeDestroy", () => {
    window.removeEventListener('resize', this.resizeHandler);
  })
}

Подсборка@hook:生命周期Слушайте обратные вызовы жизненного цикла дочерних компонентов

  • фактическое использование
<child @hook:mounted="listenChildMounted" />

v-pre

  • Использовать среду

Код HTML, который не нужно компилировать, может использовать v-pre, что может повысить производительность.

  • фактическое использование
<span v-pre>{{message}}</span>    //就算data里面定义了message，渲染完也是{{message}}

v-once

  • Использовать среду

Его нужно визуализировать только один раз, что подходит для контента, который не будет обновляться после рендеринга, что снижает нагрузку на производительность.

  • фактическое использование
<span v-once>{{message}}</span>    //message的值会编译后渲染，但是编译以后再次修改message的值不会触发更新
  • Разница между v-pre и v-once

v-pre эквивалентно отказу от компиляции, отображение напрямую, v-once эквивалентно однократной компиляции, и последующие обновления не будут компилироваться

Vue.set()

  • Использовать среду

① Когда вы используете индекс для прямой установки элемента массива

② При изменении длины массива

③ При добавлении или удалении свойств объекта

из-заObject.defineprototype()Метод ограничивает обновление данных не отвечает

  • фактическое использование
this.$set(arr,index,item);

$forceUpdate()

  • Использовать среду

$set()Существуют также определенные ограничения на использование.Если объект не имеет этого свойства,$set()Будет сообщено об ошибке. В этом случае измените данные напрямую, а затем используйте$forceUpdate()Принудительное обновление представления

  • фактическое использование
this.$forceUpdate();

keep-alive

  • Использовать среду

Когда на этой странице нет обновления данных или вы хотите сохранить состояние, в следующий раз, когда вы войдете, это будет так, например, Taobao, чтобы просмотреть страницу списка, нажмите на нее, чтобы просмотреть детали, вернуться к страницу списка и по-прежнему переходить к месту, которое вы просматривали в прошлый раз, вы можете использовать егоkeep-alive

  • фактическое использование

Разделено на использование с маршрутизацией, использованиеmax,include,excludeи особый жизненный циклactivatedа такжеdeactivated, подробности смотрите в моем блогеVue от мелкого к глубокому ряду (1) подробный контроль активности

$route маршрутная информация

  • $route.query.id

Информация, используемая для получения значения маршрута, например, суффикс route?id=1, значение $route.query.id равно 1.

  • $route.meta.flag

Он используется для получения информации в метаданных о маршрутизации. Мета в информации о маршрутизации может быть настроена. Обычно я использую навигацию, выбранную в данный момент на панели навигации, чтобы она соответствовала $route.meta.flag, чтобы узнать, на какой странице следует активировать текущая страница вкладка

  • базовый маршрут

Например, следует добавить все префиксы маршрутизации Baidu./baidu, то вы можете установить базу маршрута на/baidu

export const router = new Router({
  base:'/baidu/',
}

Кроме того, при упаковке, пожалуйста, изменитеconfig/index.jsизbuildв блокеassetsPublicPathЭто «/baidu/», иначе путь к файлу ресурсов не может быть найден после упаковки.

module.exports = {
    build:{
        assetsPublicPath: '/baidu/',
    }
}
  • хук глобальной маршрутизации

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

router.beforeEach((to, from, next) => {
  //一定要调用next()才能到下一个页面
  if (path === '/login') {
    next()
  }else{
    if(token){
      next();
    }else{
      next('/login');
    }  
  }
})
  • Доступ к этому в хуке маршрутизации компонентов

Хук маршрутизации компонентов не был инициализирован в начале и не может получить доступ к экземпляру vue. beforeRouteEnter (до, от, далее) { // Здесь пока нет доступа к экземпляру компонента, this === undefined следующий( vm => { // пройти черезvmЭкземпляр компонента доступа }) }

Информация о маршрутизации $route не обновляет проблему

  • сцены, которые будут использоваться

иногда ты из/user?id=1перенаправить на/user?id=2, так как рендеринг того жеUserкомпонента маршрутизация будет использоваться повторно, и в это время на странице по-прежнему будет информация о пользователе 1.

решение

  • Ограничители маршрута внутри компонентов
beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  • Дать<router-view>связыватьkey 
<router-view :key="$route.fullpath"></router-view>
  • Используйте часы для прослушивания маршрутов
watch:{
   '$route':{
       hander(){
           // do something...
       },
       immediate:true   //如果要首次加载就触发
   }
}

$emit передать параметры и получить значения как родительского, так и дочернего компонентов

В реальной разработке проекта вы можете столкнуться$emitНеобходимо взять значение родительского компонента и индекс родительского компонента, но по предыдущему способу записи можно получить только одно из значений, либо дочерний компонент, либо родительский компонент, а нельзя иметь оба .

  • Входные параметры подкомпонента
this.$emit('uploadSuccess',res);
  • ввод родительского компонента
<Up @uploadSuccess="uploadLogoImage(index,arguments)"  />
  • параметр метода
uploadLogoImage(){
        console.log(arguments[0]);          //index
        console.log(arguments[1][0]);      //res
},

проникновение в стиль

  • Использовать среду

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

  • фактическое использование

Есть два типа, общийstylusиспользуется в>>>,lessиспользуется в/deep/,sassНет опыта, нет объяснения


>>>.el-dialog .el-dialog__body{
  padding 0
  text-align center
  border-radius 0 0 4px 4px
}
/deep/.el-dialog .el-dialog__body{
  padding 0
  text-align center
  border-radius 0 0 4px 4px
}

Object.freeze()

  • Использовать среду

мы все знаемvueэто использоватьObject.definePropertyДвусторонняя привязка данных и для длинных списков, которые используются только для отображения, Object.freeze() можно использовать для замораживания, чтобы его нельзя было изменить, тем самым повышая производительность.

  • фактическое использование
getList().then(res=>{
    this.list=Object.freeze(res.data.result);
})

Стоит отметить, что изменение значения списка не будет обновляться, но изменение ссылки вызовет обновление.

Компонентные коммуникативные навыки

  • props
  • $emit
  • $attrs & $listeners
  • provide & inject
  • vuex
  • Observable
  • eventBus
  • $refs
  • slot-scope & v-slot
  • scopedSlots
  • $parent & $children & $root

Для подробного использования вы можете проверить этот мой блогСтатья для понимания 11 методов передачи значения в Vue.js.

Параметры родительского и дочернего компонентов получаются одновременно

  • Используя окружение, иногда в родительском компоненте нужно взять дочерний компонент$emitПереданное значение и, чтобы получить родительский компонентv-forтокindexстоимость

Входные параметры подкомпонента

this.$emit('uploadSuccess',res);

ввод родительского компонента

<Up @uploadSuccess="uploadLogoImage(index,arguments)"  />
  • фактическое использование
uploadLogoImage(){
   console.log(arguments[0]);          //index
   console.log(arguments[1][0]);      //res
},

Использование миксинов

  • Использовать среду

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

  • фактическое использование

Здесь я непосредственно инкапсулирую метод микс-ина для нового окна Vue.data,methods, а время жизни делится

//openWindow.js
export default {
  methods:{
    openUrl(url){
      const link= this.$router.resolve({path: url});
      window.open(link.href,'_blank');
    },
  }
}

//其他页面使用
import openWindow from "../../mixins/openWindow";

export default{
    mixins:[openWindow],
}
  • Примечание (используемые страницы вместе называются компонентами)

① Mix-in выполняется перед компонентом

② Если свойство или метод в примеси имеет то же имя, что и свойство или метод в компоненте, значение в компоненте имеет преимущественную силу (в сочетании с предыдущим правилом, поскольку примесь выполняется первой, компонент перезапишет примесь)

③ Например, страница A и страница B используют один и тот же миксин, а состояния страницы A и страницы B также независимы.

qs

  • используемые сцены,getПри передаче все маршрутизируется сплайсингом (?a=1&b=2), а неjsonСпособ

  • фактическое использование

//安装依赖
npm install qs --save

//页面中或者直接api.js中直接序列化使用
import qs from 'qs'
qs.stringify(params)

//axios拦截器中直接使用
import qs from 'qs'
axios.interceptors.request.use(
  config => {
    if (config.method === 'get') {
      config.data = qs.stringify(config.data)
    }
)

v-для ключа привязки не рекомендуется использовать индекс

  • основная причина

Иногда список v-for может содержатьудалить, поменять местамиждите операции, на этот разПреобразование порядка индекса приведет к тому же фрагменту данных, и индекс в этот момент будет заменен, поэтому не рекомендуется привязывать ключ v-for к индексу

  • решение

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

v-for не рекомендуется сотрудничать с v-if

  • основная причина

v-for имеет более высокий приоритет, чем v-if, то есть, предполагая в общей сложности 50 фрагментов данных, даже после v-if осталось только 25 фрагментов данных, но v-for уже циклически перебрал 50 фрагментов данных, решение состоит в том, чтобы использовать вычисляемое свойство чтобы сначала отфильтровать данные Позже цикл v-for фильтрует данные после

  • решение

использоватьcomputedРассчитать свойство, отфильтровать список, остаются только данные, необходимые после фильтрации

document.body.contentEditable

  • Как работать

Откройте консоль и введитеdocument.body.contentEditable=true, а затем нажмите Enter, веб-страницу можно редактировать как слово, что очень удобно для проверки устойчивости макета страницы к давлению.

Категории