Дополнение к методу getCurrentInstance Vue3 для получения текущего экземпляра компонента.

Vue.js
Дополнение к методу getCurrentInstance Vue3 для получения текущего экземпляра компонента.

Предыдущая статья:Быстро используйте последние 15 распространенных API-интерфейсов Vue3.(364+ 👍), я представил сведения об использовании 15 API-интерфейсов, обычно используемых в Vue3, чтобы помочь вам быстро начать работу с Vue3.Я также очень рад получить вашу поддержку, и некоторые люди также подняли вопросы, особенно для Vue3.Как получить текущий экземпляр компонентаЭтот вопрос вызывает самое бурное обсуждение, здесь мы внесем в него некоторые дополнения

В различных компонентах Vue2 мы часто используемthis, то есть для получения текущего экземпляра компонента, потому что переменные данных и методы каждого компонента должны быть получены через экземпляр компонента.

Например:

<script>
export default {
  name: 'App',
  data: {
    return {
      name: '前端印象',
      age: 22
    }
  },
  methods: {
    increase() {
      this.age += 1
    }
  },
  mounted() {
    this.increase()
  }  
}
</script>

Это хорошо видно в приведенном выше коде, в первую очередь вdataДва ответных данных объявлены вname,age; также определяет методincrease, метод заключается вageзначение+1; После того, как текущий компонент смонтирован, вызовитеincreaseметод

получать ли данныеageили получить методincrease, мы все изthis, то есть полученный из текущего экземпляра компонента

Когда дело доходит до Vue3, большинство или даже все коды клавиш написаны вsetupвнутри функции, и внутри этой функции невозможно передатьthisПолучить текущий экземпляр компонента, поскольку все переменные и методы можно использовать напрямую

Например:

<script>
import {ref, onMounted} from 'vue'
export default {
  name: 'App',
  setup() {
    const name = ref('前端印象')
    const age = ref(22)

    function increase() {
      age.value += 1
    }

    onMounted(() => {
      increase()
    })

    return {name, age}
  }
}
</script>

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

Но как было сказано в предыдущей статьеgetCurrentInstanceЭтот метод действительно может получить экземпляр компонента, как показано на рисунке.

在这里插入图片描述но это толькоdevelopment, то есть экземпляр текущего компонента можно получить только в среде разработки, иными словами, этот метод используется только для отладки в среде разработки;

Так как же это выглядит в производственной среде? Упакуем проект и распечатаем его, как показано на рисунке:

在这里插入图片描述Очевидно, вctxвообще не видит тень текущего экземпляра компонента, а только один_, щелкнем, чтобы посмотреть, что внутри, как показано на рисунке

在这里插入图片描述Через постоянные клики мы находим_Внутри бесконечный циклgetCurrentInstanceВозвращаемый результат метода, поэтому возвращаемый результат метода отличается в среде разработки и производственной среде.

Итак, снова возникает вопрос, как нам получить экземпляр компонента в Vue3? Тут я хочу сказать, ха, это все так, какой экземпляр компонента у тебя все-таки получается, если ты мне не веришь, я дам тебе пощечину

1. Получить данные

vue2:

<script>
export default {
  name: 'App',
  data: {
    return {
      name: '前端印象',
      age: 22
    }
  },
  mounted() {
    console.log(this.name)
    console.log(this.age)
  }  
}
</script>

vue3:

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup() {
    const name = ref('前端印象')
    const age = ref(22)

    console.log(name.value)
    console.log(age.value)

    return {name, age}
  }
}
</script>

2. Как использовать

vue2:

<script>
export default {
  name: 'App',
  methods: {
    show() {
      console.log('show方法被调用')
    }
  },
  mounted() {
    this.show()
  }  
}
</script>

vue3:

<script>
import {onMounted} from 'vue'
export default {
  name: 'App',
  setup() {
    function show() {
      console.log('show方法被调用')
    }

    onMounted(() => {
      show()
    })
  }
}
</script>

3. Получить текущий корневой элемент компонента

vue2:

<template>
  <div id="app" ref="root">
    <p class="child"></p>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    const el = this.$refs.root
    console.log(el)
  }  
}
</script>

vue3:

<template>
  <div id="app" ref="root">
    <p class="child"></p>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue'
export default {
  name: 'App',
  setup() {
    const root = ref(null)

    onMounted(() => {
      console.log(root.value)
    })
  }
}
</script>

4. Дочерний компонент взаимодействует с родительским компонентом

vue2:

<script>
export default {
  name: 'App',
  methods: {
    change() {
      this.$emit('valueChange', 3)
    }
  } 
}
</script>

vue3:

<script>
export default {
  name: 'App',
  setup(props, context) {
    function change() {
      context.emit('valueChange', 3)
    }
  }
}
</script>

5. Получите объект Vuex

vue2:

<script>
export default {
  name: 'App',
  mounted() {
    console.log(this.$store.state.name)
    this.$store.commit('show')
  } 
}
</script>

vue3:

<script>
import {onMounted} from 'vue'
import {useStore} from 'vuex'
export default {
  name: 'App',
  setup(props, context) {
    const store = useStore()

    onMounted(() => {
      console.log(store.name)
      store.commit('show')
    })
  }
}
</script>

Суммировать: Не полагайтесь наgetCurrentInstanceметод для получения экземпляра компонента для выполнения некоторых основных функций, в противном случае после упаковки проекта будет сообщено об ошибке.

👊Рекомендуемое чтение(Надеюсь, вы все поддержите 💖)

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

Смотрите здесь, не заказывайте 🤞отличный?

Категории