You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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`отслеживается как зависимость.
125
125
126
-
So, given the following code:
126
+
И так, дан следующий код:
127
127
128
128
```js
129
129
const { foo } =defineProps(['foo'])
130
130
131
131
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+
134
134
console.log(foo)
135
135
})
136
136
```
137
137
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` несколько раз. Поэтому приведенный выше код становится эквивалентным следующему:
139
139
140
140
```js {5}
141
141
constprops=defineProps(['foo'])
142
142
143
143
watchEffect(() => {
144
-
// `foo` transformed to `props.foo` by the compiler
144
+
// `foo` преобразуется компилятором в `props.foo`
145
145
console.log(props.foo)
146
146
})
147
147
```
148
148
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 для объявления значений по умолчанию для свойств. Это особенно полезно при использовании объявления свойств на основе типов:
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 предоставляет настройку, позволяющую включить инлайн-подсказки для деструктурированных реквизитов.
156
156
157
-
### Passing Destructured Props into Functions {#passing-destructured-props-into-functions}
157
+
### Передача деструктурированных свойств в функции {#passing-destructured-props-into-functions}
158
158
159
-
When we pass a destructured prop into a function, e.g.:
159
+
Когда мы передаём деструктурированное свойство в функцию, например:
160
160
161
161
```js
162
162
const { foo } =defineProps(['foo'])
163
163
164
164
watch(foo, /* ... */)
165
165
```
166
166
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 отлавливает такие случаи и выдает предупреждение.
168
168
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, ...)`, мы можем наблюдать за деструктурированным свойством, обернув его в геттер.
170
170
171
171
```js
172
172
watch(() => foo, /* ... */)
173
173
```
174
174
175
-
In addition, this is the recommended approach when we need to pass a destructured prop into an external function while retaining reactivity:
175
+
Кроме того, это рекомендуемый подход, когда нам нужно передать деструктурированное свойство во внешнюю функцию, сохранив при этом реактивность:
176
176
177
177
```js
178
178
useComposable(() => foo)
179
179
```
180
180
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)) когда ей нужно отследить изменения предоставленного свойства, например, в вычисляемом или наблюдающем геттере.
0 commit comments