Vue3.0 не боится составного API кода предков

Vue.js
Vue3.0 не боится составного API кода предков

Всем привет, я Ли Бай~~

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

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

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

Это вздох, но я все еще очень завидую в своем сердце, завидую людям, которые разговаривают, смеются и едят вместе.

Мне тоже немного грустно, грустно за себя, ничего, ничего, что толку, что толку, что толку от кода! ! !

Но я считаю, что мои кулинарные способности определенно не так хороши, как мои! ! ! ! Я тоже не умею писать код! ! ! ! Я самый высокий! ! ! (Лицом к компьютеру статья, написанная со слезами ε(┬┬﹏┬┬)3

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

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

Composition API построен поверх реактивного API и реализует что-то вродеReact hookПо сравнению с объектным API версии 2.x он имеет более гибкий режим организации кода и более надежную возможность вывода типов. разрешимыйVueБолевые точки в сценариях крупномасштабных приложений.

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

Начните жарить короля и представьте краткую и четкую сравнительную картинку~~ (источник материала)@ улитка старая мокрая _ большой святой, плюс яЛи Бай владеет PS.График квадратичной оптимизации)

не могу читать? ? Ничего страшного

Давайте еще раз посмотрим на код, чтобы показать разницу, сначала реализуем классическую «функцию таймера»:

<template>
	<div>{{count}}: {{double}}</div>
	<button @click="increment">+1</button>
</template>

// Vue2 写法
export default {
    data(){
        return {
            count: 0
        }
    },
    methods: {
        increment() {
            this.count++;
        }
    },
    computed: {
        double() {
            return this.count * 2;
        }
    }
}

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

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

// Vue3 Composition API
import { ref, computed } from 'vue'
export default {
    setup() {
        let count = ref(0)
        let double = computed(() => count.value * 2)
        function increment() {
            count.value++
        }
        return {
            count,
            double,
            increment
        }
    }
}

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

код + картинка, Если ты снова не можешь этого понять, не вини меня в том, что я не держу людей. (Я сменил профессию, можешь играть сам~)

Инкапсуляция кода и повторное использование

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

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

// useCount.js
import { ref, computed } from 'vue'
function useCount() {
    let count = ref(0)
    let double = computed(() => count.value * 2)
    function increment() {
        count.value++
    }
    return {
        count,
        double,
        increment
    }
}
export default useCount

// app.vue
import useCount from './useCount.js'
export default {
	setup() {
		let { count, double, increment } = useCount()
		return { 
			count,
			double,
			increment
		}
	}
}

оба сосуществуют

optionиComposition APIмогут быть разделены, не затрагивая друг друга.

В vue2data,computedи другие параметры по-прежнему поддерживаются, но используйтеsetupНе рекомендуется использовать vue2 вdataи другие варианты.

import { ref, computed } from 'vue'
export default {
    setup() {
        let count = ref(0)
        let double = computed(() => count.value * 2)
        function increment() {
            count.value++
        }
        return {
            count,
            double,
            increment
        }
    },
    data() {
        return {
            a: 2
        }
    },
    mounted() {
        // 可使用setup的返回值
        console.log(this)
    }
}

функция настройки

  • исполнительный механизм

setupсоздает экземпляр компонента и завершаетpropsВыполняется после инициализации, также вbeforeCreateВыполняется перед хуком, не может получить доступ к опции (data,comupted,methodsи т.д.) опция, и опция может использоватьsetupпеременная, возвращенная в .

  • нетthis: вызывается перед разбором других опций компонентаsetup()

  • Принимает два параметра:

    • реквизит: параметры компонента
    • context: контекст выполнения, включая три метода атрибута:attrs,slots,emit 
export default {
    props: {
        user: {
            type: String,
            defalut: 'Libai'
        }
    },
    setup(props, context) {
        console.log(props.user)
        console.log(context)
    }
}
  • жизненный цикл

его внутреннее использованиекрючки жизненного цикладолжен предшествоватьon

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

import { onMounted } from 'vue'
export default {
    setup() {
        // mounted
        onMounted(() => {
            console.log('Component is mounted!')
        })
    }
}
функция ловушки глупое использование
beforeCreate не поддерживается
created не поддерживается
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
errorCaptured onErrorCaptured
renderTracked onRenderTracked
renderTriggered onRenderTriggered
  • функция рендеринга

setupТакже возможно вернуть функцию рендеринга, которая может напрямую использовать реактивное состояние, объявленное в той же области видимости:

// MyBook.vue
import { h, ref, reactive } from 'vue'
export default {
  setup() {
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    // Please note that we need to explicitly expose ref value here
    return () => h('div', [readersNumber.value, book.title])
  }
}

provide & inject

Похоже на vue2provideиinject, vue3 предоставляет соответствующийprovideиinjectAPI, реализующий передачу параметров компонента.

Функция Provide позволяет определить свойство с двумя параметрами:

  • название объекта (<String>тип)
  • стоимость имущества
<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue'
export default {
  components: {
    MyMarker
  },
  setup() {
    provide('location', 'North Pole')
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
  }
}
</script>

injectФункция имеет два параметра:

  • вводитьpropertyимя существительное
  • значение по умолчанию (необязательно)
<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'
export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')
    return {
      userLocation,
      userGeolocation
    }
  }
}
</script>

watch & computed

  • watch: слушатель, принимает три параметра
    • Реактивная ссылка или функция-получатель, которую мы хотим прослушать
    • обратный звонок
    • Дополнительные параметры конфигурации
import { ref, watch } from 'vue'
export default {
    setup() {
        const counter = ref(0)
        watch(counter, (newValue, oldValue) => {
            console.log('The new counter value is: ' + counter.value)
        })
    },
    // setup中的相当于以下
    data() {
        return {
            counter: 0
        }
    },
    watch: {
        counter(newValue, oldValue) {
            console.log('The new counter value is: ' + this.counter)
        }
    }
}

watchТретий параметр, настраиваемые параметры:

{
    deep: true,     // 深度监听
    lazy: true,     // vue中的immediate，默认挂载后执行
    flush: '',      // 三个值：'post'(默认), 'pre', 'sync'
                    // 'pre': 表示在状态更新时同步调用
                    // 'sync':表示在组件更新之前调用
    onTrack(){},    // 在reactive属性或ref被追踪为依赖时调用。
    onTrigger(){}   // 在watcher的回调因依赖改变而触发时调用。
}
  • computed

с vue2computedФункционально непротиворечивый, он принимает функцию и возвращаетvalueзаgetterНеизменяемое реактивное возвращаемое значениеrefобъект.

const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // 错误，computed不可改变

// 同样支持set和get属性
onst count = ref(1)
const plusOne = computed({
    get: () => count.value + 1,
    set: val => { count.value = val - 1 }
})
plusOne.value = 1
console.log(count.value) // 0

Суммировать

У всего есть две стороны, каким бы совершенным оно ни было, за ним будет тьма. еще не знаюComposition APIЧто случилось, давай попрощаемся~~

Сяобай пишет, если письмо плохое, пожалуйста, дайте мне предложение~~ Если это было полезно для вас, пожалуйста, поставьте лайк~~

Если есть следующая статья, она должна быть отзывчивой.

Дополнительная информация для обмена:

Категории