Vue.js 3 : в-модель теряет активность при данных()` преобразуется в `настройка()`


Vue.js 3 : в-модель теряет активность при данных()` преобразуется в `настройка()`

26.09.2020 04:46:54 Просмотров 33 Источник

Рассмотрим этот базовый пример, где у нас есть input и p, которые показывают значение входных данных:

const App = {
  data() {
    return {
      message: "hello world!"
    };
  }
};


Vue.createApp(App).mount('#root');
<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  <input v-model="message"/>
  {{ message }}
</div>

При изменении входного текста он отражается в содержимом p. Но если вы замените data() на setup(), изменения в input больше не будут отражаться в p:

const App = {
  setup() {
    return {
      message: "hello world!"
    };
  }
};


Vue.createApp(App).mount('#root');
<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  <input v-model="message"/>
  {{ message }}
</div>

Простое исправление - это p1 p2:

p3
<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  <input v-model="message"/>
  {{ message }}
</div>

Но почему мы должны это делать? Почему это не работает из коробки?

Я думал, что это может быть потому, что объект, возвращенный из data(), внутренне реагирует, но объект, возвращенный из setup(), не реагирует, потому что этот объект может содержать не только данные, но и методы, которые не нужно наблюдать, но когда я проверяю p7, я вижу, что это p8. Так почему же это не работает?

У вопроса есть решение - Посмотреть?

Ответы - Vue.js 3 : в-модель теряет активность при данных()` преобразуется в `настройка()` / Vue.js 3 : a `v-model` looses reactivity when `data()` converted to `setup()`

Boussadjra Brahim

26.09.2020 04:52:43

return {...} просто выставляет эти значения за пределы функции настройки, вы всегда должны использовать ref или reactive, чтобы сделать ваши данные реактивными :

setup() {
    const message = Vue.ref("hello world!");
    return {
      message
    };
  }

Вы можете увидеть комментарий здесь, который говорит // expose to template :

<template>
  <div>{{ count }} {{ object.foo }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const count = ref(0)
      const object = reactive({ foo: 'bar' })

      // expose to template
      return {
        count,
        object
      }
    }
  }
</script>

И в соответствии с настройкой использования с шаблоном :

Если setup возвращает объект, то свойства этого объекта могут быть доступны в шаблоне компонента, а также свойства props, переданные в setup

Вывод

объект, возвращаемый в функции setup, отличается от объекта, возвращаемого из свойства ref0 в option api

Помочь в развитии проекта:
Закрыть X