«Чудесные трюки» Vue

Vue.js

введение

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

текст

1. Миксин

Миксины предоставляют очень гибкий способ распространения повторно используемой функциональности в компонентах Vue. Миксин может содержать любые параметры компонента, т. е. жизненный цикл, базовые данные, методы экземпляра, и когда компонент использует миксин, все параметры из миксина будут «подмешаны» к собственным параметрам компонента. Когда нам нужно использовать данные и методы на каждой отдельной странице外部的对象中Затем определение импортируется в соответствующий экземпляр. Это можно рассматривать как усиление экземпляра.

// 单页面组件
<template>
   <div class=''>
       {{mixinData}} // '我是混入的数据'（可以引入到混入的对象的data）
   </div>
</template>
<script>
import mixin from'./mixin'
export default {
  mixins:[mixin],
  data () {
    return {
      innerData:'我是单页面本身的数据'
    };
  },
  methods: {
    mixins(){
      alert('我是单页面的方法')
    }
  },
  created() {
    alert('我是单页面本身created的生命周期')
    this.mixins()  // 
  },
}

// 混入的对象mixin
export default {
    created(){
        alert('我是mixin内部的created的生命周期')
    },
    data(){
        return {
            mixinData:'我是混入的数据'
        }
    }, 
    methods: {
        mixins(){
          alert('我是mixin内部的方法')
        }
    },
}

Результат вывода:我是mixin内部的created的生命周期 -> 我是单页面本身created的生命周期 -> 我是单页面的方法
сводная записка敲黑板:

  • Крюк функционирует с тем же именем (созданным, установленным и т. Д.) Будет объединена в массив, поэтому все будут вызываться. Кроме того, крючки микса будут называться перед собственными крючками компонента.
  • Опции, значением которых является объект, такие как методы, компоненты, директивы и т. д., будут объединены в один и тот же объект. Когда имена ключей двух объектов конфликтуют, возьмите пару ключ-значение объекта-компонента.一切以组件优先
  • Данные объекта данных имеют приоритет над данными компонента в случае конфликта

2. Функция рендеринга

VUE по-прежнему использует синтаксис разделенных шаблонов html js css в файлах шаблонов для создания одностраничных приложений, но я считаю, что контроль над тегами html немного недостаточен, и может быть недостаточно поддержки для отображения разных тегов в соответствии с разными данными. нужно полностью пройти все возможные ситуации. Это, безусловно, избыточно и неэффективно.

Здесь мы представляем официальные примеры для лучшего объяснения.

<template>
   <div class=''>    // 根绝参数来渲染出不同的行标签你会发现下面的代码是冗余的，不但代码冗长，而且在每一个级别的标题中重复书写了 <slot></slot>
      <h1 v-if="type === 1">
        <slot></slot>
      </h1>
      <h2 v-else-if="type === 2">
        <slot></slot>
      </h2>
      <h3 v-else-if="type === 3">
        <slot></slot>
      </h3>
   </div>
</template>
<script>
export default {
   props: {
    type: {
      type: Number, // 引入了一个父组件传入的参数
      default: 1
    },
  },
}
</script>
<style lang='less' scoped>
</style>

если больше行标签Затем число в шаблоне будет постепенно увеличиваться, и в то же время будет увеличиваться повторное выполнение суждения. Такого трудоемкого и неблагодарного дела нам следует избегать. Итак, мы представимrender()рендерить. то есть использоватьrenderфункция вместо этогоtemplate标签на отрисовке этикеток.

子组件
import Vue from 'vue'
Vue.component('Heading',{
    render:function(createElement){
         return createElement(`h${this.type}`,this.$slots.default) // 这行代码完成了模板渲染中的关于h标签的选择部分
    },
    props: {
       type: {
            type: Number,
            default: 1
        },
    },
})

<!--父组件-->
<Heading :type="2">123</Heading>  // 渲染结果 <h2>123</h2>

createElementЭто допустимый параметр функции рендеринга.С помощью createElement можно построить древовидную структуру для рендеринга. Первый параметр — метка, второй — значение атрибута, соответствующее метке, а третий может быть вложеннымcreateElement数组То есть массив вложенных тегов. внутри массиваcreateElement选项Также может быть вложенным. Подробные решения и примеры можно найти в официальной документации.Вот идея.

import Vue from 'vue'
Vue.component('Heading',{
    render:function(createElement){
         return createElement(`div`,[createElement('h1','h1的内容'),createElement('h2','h2的内容')])
    },
})
上述的渲染函数出来的dom等同于:
<div>
    <h1>h1的内容</h1>
    <h2>h2的内容</h2>
</div>

3. Функциональные компоненты

Разница между функциональными компонентами и общими компонентами в том, что нет жизненного цикла, отзывчивых данных, вычисляемых свойств и т. д., то есть функциональные компоненты можно понимать как компонент без экземпляра vue, и он принимает только одинprops, что также принесло ему характеристики быстрого рендеринга.

Сценарий личного использования: я буду использовать инкапсуляцию в нескольких одноуровневых компонентах. Например, здесь у меня есть требование к отображению: я хочу отобразить тот же источник данных с помощью дополнительных методов отображения, таких как карточки и списки. Если мы напишем весь этот код в одном компоненте解耦度低, если мы напишем дисплей как компонент и введем все родительские компоненты, то снова появится код冗余. Таким образом, мы можем предоставить компонент для分发Компоненты, отвечающие условиям. Каждый из них может использоваться отдельно в сборе дисплея, а компоненты могут использоваться в одном корпусе.

// 父组件
<template>
   <div class='father'>
        <card-component v-if="type===card"></card-component>  // 不同组件我们需要都引入到父组件中
        <list-component v-if="type===list"></list-component>
        <circle-component v-if="type===circle"></circle-component>
   </div>
</template>
<script>
export default {
  data () {
    return {
      type:'card'
    };
  },
}
</script>


//重写父组件
<template>
   <div class='father'>
        <function-component :type="type"></function-component>  // 函数组件分发
   </div>
</template>

//函数组件
<template functional>    // functional是标记模板语法这个组件是函数式组件，如果不使用模板就应该设置functional:true
   <div class='father'>
        <card-component v-if="prop.type===card"></card-component>  // 不同组件我们引入函数组件
        <list-component v-if="prop.type===list"></list-component>
        <circle-component v-if="prop.type===circle"></circle-component>
   </div>
</template>

конец

Если появятся новые, они будут продолжать обновляться.

Категории