Skip to content

Commit 9b58ddd

Browse files
authored
Merge pull request #501 from klirii/patch-9
Update props.md
2 parents 74f28ca + b7ad396 commit 9b58ddd

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

src/guide/components/props.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -119,66 +119,66 @@ defineProps<{
119119

120120
<div class="composition-api">
121121

122-
## Reactive Props Destructure <sup class="vt-badge" data-text="3.5+" /> \*\* {#reactive-props-destructure}
122+
## Деструктурирование реактивных свойств <sup class="vt-badge" data-text="3.5+" /> \*\* {#reactive-props-destructure}
123123

124-
Vue's reactivity system tracks state usage based on property access. E.g. when you access `props.foo` in a computed getter or a watcher, the `foo` prop gets tracked as a dependency.
124+
Система реактивности Vue отслеживает использование состояния на основе доступа к свойствам. Например, когда вы обращаетесь к `props.foo` в вычисляемом геттере или наблюдателе, свойство `foo` отслеживается как зависимость.
125125

126-
So, given the following code:
126+
И так, дан следующий код:
127127

128128
```js
129129
const { foo } = defineProps(['foo'])
130130

131131
watchEffect(() => {
132-
// runs only once before 3.5
133-
// re-runs when the "foo" prop changes in 3.5+
132+
// до версии 3.5 функция сработает только один раз
133+
// перезапускается при изменении свойства "foo" в версии 3.5+
134134
console.log(foo)
135135
})
136136
```
137137

138-
In version 3.4 and below, `foo` is an actual constant and will never change. In version 3.5 and above, Vue's compiler automatically prepends `props.` when code in the same `<script setup>` block accesses variables destructured from `defineProps`. Therefore the code above becomes equivalent to the following:
138+
В версии 3.4 и ниже `foo` является фактической константой и никогда не изменится. В версии 3.5 и выше компилятор Vue автоматически добавляет `props.` когда код в одном и том же блоке `<script setup>` обращается к переменным, деструктурированным из `defineProps` несколько раз. Поэтому приведенный выше код становится эквивалентным следующему:
139139

140140
```js {5}
141141
const props = defineProps(['foo'])
142142

143143
watchEffect(() => {
144-
// `foo` transformed to `props.foo` by the compiler
144+
// `foo` преобразуется компилятором в `props.foo`
145145
console.log(props.foo)
146146
})
147147
```
148148

149-
In addition, you can use JavaScript's native default value syntax to declare default values for the props. This is particularly useful when using the type-based props declaration:
149+
Кроме того, вы можете использовать собственный синтаксис JavaScript для объявления значений по умолчанию для свойств. Это особенно полезно при использовании объявления свойств на основе типов:
150150

151151
```ts
152152
const { foo = 'hello' } = defineProps<{ foo?: string }>()
153153
```
154154

155-
If you prefer to have more visual distinction between destructured props and normal variables in your IDE, Vue's VSCode extension provides a setting to enable inlay-hints for destructured props.
155+
Если вы предпочитаете визуально отличать деструктурированные свойства от обычных переменных в вашей IDE, расширение Vue в VSCode предоставляет настройку, позволяющую включить инлайн-подсказки для деструктурированных реквизитов.
156156

157-
### Passing Destructured Props into Functions {#passing-destructured-props-into-functions}
157+
### Передача деструктурированных свойств в функции {#passing-destructured-props-into-functions}
158158

159-
When we pass a destructured prop into a function, e.g.:
159+
Когда мы передаём деструктурированное свойство в функцию, например:
160160

161161
```js
162162
const { foo } = defineProps(['foo'])
163163

164164
watch(foo, /* ... */)
165165
```
166166

167-
This will not work as expected because it is equivalent to `watch(props.foo, ...)` - we are passing a value instead of a reactive data source to `watch`. In fact, Vue's compiler will catch such cases and throw a warning.
167+
Это не будет работать так, как ожидалось, потому что это эквивалентно `watch(props.foo, ...)` - мы передаем значение, а не реактивный источник данных в `watch`. На самом деле, компилятор Vue отлавливает такие случаи и выдает предупреждение.
168168

169-
Similar to how we can watch a normal prop with `watch(() => props.foo, ...)`, we can watch a destructured prop also by wrapping it in a getter:
169+
Подобно тому, как мы можем наблюдать за обычным свойством с помощью `watch(() => props.foo, ...)`, мы можем наблюдать за деструктурированным свойством, обернув его в геттер.
170170

171171
```js
172172
watch(() => foo, /* ... */)
173173
```
174174

175-
In addition, this is the recommended approach when we need to pass a destructured prop into an external function while retaining reactivity:
175+
Кроме того, это рекомендуемый подход, когда нам нужно передать деструктурированное свойство во внешнюю функцию, сохранив при этом реактивность:
176176

177177
```js
178178
useComposable(() => foo)
179179
```
180180

181-
The external function can call the getter (or normalize it with [toValue](/api/reactivity-utilities.html#tovalue)) when it needs to track changes of the provided prop, e.g. in a computed or watcher getter.
181+
Внешняя функция может вызвать геттер (или нормализовать его с помощью [toValue](/api/reactivity-utilities.html#tovalue)) когда ей нужно отследить изменения предоставленного свойства, например, в вычисляемом или наблюдающем геттере.
182182

183183
</div>
184184

0 commit comments

Comments
 (0)