Vue3.0 попробовать

Vue.js

предисловие

Связанная грамматика, связанная с Vue2, я считаю, что все уже знают грамматику, и теперь они имеют2020Спустя годы Vue стал настолько популярным интерфейсным фреймворком, почему бы вам не изучить тот, который подходит для фронтенда? Хахахаха 🤣🤣🤣.
     Меня начало бросать всю дорогу. Это было мучительное путешествие. Я не знаю, что я испытал до сих пор.vue3.xТут же началось снова, поэтому я тоже сначала протестировал воду и сыграл волну родственной грамматики.
     Не говорите чушь, просто зайдите в код и запишите его (т.к. я им не пользовалсяTSТак осуществляется сES6провести)

Начинать

  1. существуетvue-cli3.0установить подcomposition-api 
    npm install @vue/composition-api --save
# OR
yarn add @vue/composition-api
  2. используя любой@vue/composition-apiПрежде чем предоставлять возможность, ее необходимо установить через Vue.use().
    import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)
    После завершения установки вы можете использовать связанные проекты в проектеcomposition-apiРазвивались

Настройка (функция ввода)

    setup()функцияvue3, новые свойства, предоставленные специально для компонентов, кажутся такими жеvue2.xсерединаdataтакже необходимо вернутьObjectсодержит самоопределяемыеfunction, computed, watchА также имущество и жизненный цикл.

  1. Функция настройки будет выполнена после beforeCreate и до создания.

    setup(props, context) {
    const state = reactive({count: 0}) // 创建数据
    return state // 返回页面中使用
}

  2. перениматьpropsданные

    1. существуетpropsОпределите имена параметров, которые текущий компонент позволяет передавать внешнему миру:
      props: {
   name: String
}
    2. пройти черезsetupПервый параметр функции, которая получает данные реквизита:
      setup(props) {
    console.log(props.name)
}

  3. параметр контекста

    setupВторой параметр функции — объект контекста, которыйvue2.xсерединаthis,существуетvue 3.x, они доступны следующим образом

     setup(props, context) {
    context.slots
    context.emit
    context.refs
}

реактивный и ref (отзывчивые источники данных)

  1. reactive()Функция принимает простой объект и возвращает объект данных ответа.

    Это эквивалентноvue2.xсерединаVue.observable()функция,vue3.xЗатем есть объект данных, который можно создать непосредственно с помощью функции reactive().

    1. Импорт по требованиюreactiveсвязанные функции

      import { reactive } from '@vue/composition-api'

    2. существуетsetup()функция называетсяreactive()функция для создания соответствующего отзывчивого объекта данных

      setup() {
    // 这个类似于vue2中的data()返回的响应式对象
    const state = reactive({ count: 0 }) 
    return state
}

    3. существуетtemplateДоступ к реагирующим данным в

      <template>
    <span>当前的count值为:{{count}}</span>
</template>

  2. ref()Функция используется для создания реактивного объекта данных на основе заданного значения,ref()Возвращаемое значение вызова функции — это объект, который содержит только одинvalueАтрибуты.

    1. Связанный импортrefсвязанные функции

      import { ref } from '@vue/composition-api'

    2. Создание реактивных объектов

      setup() {
    const count = ref(0)
        return {
            count,
            name: ref('vue')
        }
}

    3. существуетtemplateДоступ к реагирующим данным в

      <template>
    <span>{{count}}--- {{name}}</span>
</template>

  3. isRefиспользование ,isRef()Функция в основном используется для определения того, является ли значениеref()Создано из объектов; сценарии: когда нужно расширить возможностьref()Стоит создать, например:

    import { isRef } from '@vue/composition-api'

const fooData = isRef(foo) ? foo.value : foo

  4. toRefsиспользование,toRefs()функция может бытьreactive()Созданный отзывчивый объект преобразуется в обычный объект, но все узлы атрибутов этого объекта имеют видref()Типы, такие как данные, наиболее распространенные сценарии применения

    import { toRefs, reactive } from '@vue/composition-api'

setup() {
    // 定义响应式数据对象
    const state = reactive({
      count: 0
    })
    
    // 定义页面上可用的事件处理函数
    const increment = () => {
      state.count++
    }
    
    // 在 setup 中返回一个对象供页面使用
    // 这个对象中可以包含响应式的数据，也可以包含事件处理函数
    return {
      // 将 state 上的每个属性，都转化为 ref 形式的响应式数据
      ...toRefs(state),
      // 自增的事件处理函数
      increment
    }
}

    существуетtemplateможно использовать непосредственно вcountсвойства и соответствующиеincrementметод, если он не используетсяroRefsвозвращаться напрямуюstateтогда вам нужно пройтиstate.xxдля доступа к данным

    <template>
  <div>
    <span>当前的count值为：{{count}}</span>
    <button @click="increment">add</button>
  </div>
</template>

вычисляемые и наблюдаемые (вычисляемые свойства и мониторинг)

  1. computed()используется для создания вычисляемых свойств,computed()Возвращаемое значение функции является экземпляром ref. использоватьcomputedПеред необходимостью импорта по требованию:

    import { computed } from '@vue/composition-api'

    1. Создайте вычисляемое свойство только для чтения при вызовеcomputed()функция, передать вfunctionдля получения вычисляемого свойства, доступного только для чтения.

      // 创建一个响应式数据
const count = ref(1) 

// 根据count的值创建一个响应式的计算属性， 它会根据ref自动计算并且返回一个新的ref
const computedCount = computed(() => count.value + 1 ) 

console.log(computedCount.value) // 打印 2

computedCount.value++ //报错

    2. Создание вычисляемого свойства для чтения и записи

      вызовcomputed()При передаче функции, содержащейgetа такжеsetобъект, вы можете получить доступное для чтения и записи вычисляемое свойство.

      // 创建一个响应式数据
const count = ref(1) 

// 根据count的值创建一个响应式的计算属性， 它会根据ref自动计算并且返回一个新的ref
const computedCount = computed({
    get: () => count.value + 1,
    set: (val) => count.value = val - 1
} ) 

computedCount.count = 6

console.log(count.value) // 打印 5

    2. watch()Функция используется для отслеживания изменений данных, сvue2.xто же самое вcomputedМетод использования такой же, как и при импорте.apiметод

    импортировать перед использованиемimport { watch } from '@vue/composition-api'

    1. Основное использование

      const count = ref(0)

// 定义watch只要count的值变化，就会触发watch的回调
// watch 会在创建的时候自动调用一次

watch(() => console.log(count.value))


setTimeout(() => {
    count.value++
}, 1000)

    2. Мониторинг указанных данных

      / 定义reactive数据源
const state = reactive({ count: 0 })
// 监视 state.count 这个数据节点的变化
watch(() => state.count, (now, prev) => { 
    console.log(now, prev)
})

/ 定义ref数据源
const count = ref(0)
// 监视count这个数据的变化
watch(count, (now, prev) => { 
    console.log(now, prev)
})

Крючки жизненного цикла

Жизненный цикл в новой версии должен быть импортирован по требованию и может быть записан толькоsetup()в функции.

использоватьonBeforeMount, onMounted, updatedСвязанный жизненный цикл, связанный с импортом перед использованиемapiметод

import { onBeforeMount, onMounted, updated } from '@vue/composition-api'

setup () {
   onBeforeMount(() => {
     console.log('onBeforeMount!')
   })
   onMounted(() => {
     console.log('onMounted!')
   })
   updated(() => {
     console.log('updated!')
   }) 
}

К каждому методу жизненного цикла относится передачаfunctionфункция.

vue2.xс новой версией Composition APIОтображение отношений между

  • beforeCreate -> setup
  • created -> setup
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

предоставлять и вводить (обмен данными)

provide()а такжеinject()Возможна передача данных между вложенными компонентами. Эти две функции можно использовать только вsetup()используется в функции. используется в родительском компонентеprovide()Функции могут передавать данные вниз, используемые в подкомпонентахinject()Прием данных с верхнего уровня.

Код реализации:

корневой компонент (родительский компонент)parent.vue

<template>
  <div>
    <child-one></child-one>
    <child-two></child-two>
  </div>
</template>

<script>
  import { provide } from '@vue/composition-api'
  import ChildOne from '@/components/Child'
  import ChildTwo from '@/components/Child'
  export default {
    components: {
       ChildOne,
       ChildTwo
    },
    setup() {
    // provide('要共享的数据名称', 被共享的数据)
      provide('globalName', 'vue') 
    }
  }

</script>

подкомпонент 1ChildOne.vue

<template>
  <div>
    <!--页面展示数据globalName -->
    {{globalName}} 
  </div>
</template>

<script>
  import { inject } from '@vue/composition-api'
  export default {
    name: 'ChildOne',
    setup() {
      const globalName = inject('globalName') 调用 inject 函数时，通过指定的数据名称，获取到父级共享的数据
      return {
        globalName
      }
    }
  }
</script>

подкомпонент 2ChildTwo.vue

<template>
  <div>
    <!--页面展示数据globalName -->
    {{globalName}} 
  </div>
</template>

<script>
  import { inject } from '@vue/composition-api'
  export default {
    name: 'ChildTwo',
    setup() {
      const globalName = inject('globalName') 调用 inject 函数时，通过指定的数据名称，获取到父级共享的数据
      return {
        globalName
      }
    }
  }
</script>

provideДанные, совместно используемые функциями, могут сделатьrefа такжеreactiveОпределены адаптивные данные, использование аналогично

ссылки на шаблоны (компоненты элементов)

мы знаем, что вvue2.xПолучить элемент страницыDOMв состоянии пройтиrefнаписано на элементе страницы, а затем вjsпрошедший$refs.xчтобы получить текущий элементDOMинформация об элементе, работаDOM,существуетcomposition-apiв котором мы предоставляемrefметод проходит черезnullи определено в элементе страницы с помощьюrefСоответствующий.

Код:

<template>
  <div>
    <h1 ref="h1Ref">Hello Word</h1>
  </div>
</template>

<script>
import { ref, onMounted } from '@vue/composition-api'

export default {
  setup() {
    // 创建一个 DOM 引用
    const h1Ref = ref(null)

    // 在 DOM 首次加载完毕之后，才能获取到元素的引用
    onMounted(() => {
      // 为 dom 元素设置字体颜色
      // h1Ref.value 是原生DOM对象
      console.log(h1Ref.value)
    })

    // 把创建的引用 return 出去
    return {
      h1Ref
    }
  }
}
</script>

конец

Чувствоватьcomposition-apiВсе они используются в виде импорта, который непосредственно не чувствуется.vue2.xУдобно использовать прямо в 😂. Хотя говорят, что он импортируется по запросу, используйте метод, который вы хотите использовать. по сравнению сvue2.xОчень неудобно внезапно разворачиваться и писать различные методы данных вsetupЕго можно использовать на странице только в том случае, если он экспортирован в функцию ввода. несмотря на то чтоvue2.xОпределенные данные также должны пройтиdataФункция возвращает значение, а затем использует его на странице, но метод не используется, и мониторинг вычисляемых свойств не используется. Может быть, он привыкает к этомуvue2.xРазнообразные методы письма, чувствовать себя разнообразно здорово в использовании. переход кvue3.xэто сейчасcomposition-apiЕще нужно какое-то время.

В конце концов, у меня все еще есть проблема, которую я не решил. Может ли кто-нибудь дать мне идею? Как написать связь между дочерним и родительским компонентами? Предыдущая версия прошла через$emitВыполнил, я нашел этоsetupРодительский компонент, записанный в функции, не может быть получен.

Вставить наконецcomposition-apiофициальная документация

vue-composition-api-rfc.netlify.com

Категории