我试图理解可组合项的目的。我有一个像这样的简单可组合项，并试图从 Pinia 商店观看watch不触发的状态：
import { ref, watch, computed } from "vue";
import { storeToRefs } from "pinia";
import useFlightsStore from "src/pinia/flights.js";
import usePassengersStore from "src/pinia/passengers.js";
export function useFlight() {
const route = useRoute();
const modalStore = useModalStore();
const flightsStore = useFlightsStore();
const { selection } = storeToRefs(flightsStore);
const passengersStore = usePassengersStore();
const { passengers, adults, children, infants } =
storeToRefs(passengersStore);
watch([adults, children, infants], (val) => console.log('value changes', val))
Vue 组件中的相同功能按预期工作。
那么我们无法观察可组合项内的值？
我有一个包含 2000 个输入复选框的列表。当一次选择它们时，会出现大约 2 秒的明显延迟（并且浏览器冻结）。Vue 和 React 似乎是这种情况，但 Svelte、jQuery 或 vanilla 则不然。
有了 5k+ 复选框，它就变成了一个非常烦人的 3-5 秒拦截器......
为什么重新渲染需要这么长时间？
如何使用 Vue.js 克服此更新延迟？
（分页或延迟加载的解决方案并没有真正解决问题；他们只是在避免问题。）
下面是 Vue 中的代码，后面是 Svelte 中的相同示例。
<script setup>
import { ref } from 'vue'
const items = ref(Array.from({length: 2000}, (v, k) => k));
let selected = ref([]);
function selectAll() {
selected.value = items.value.map(i => i);
}
</script>
<template>
<button @click="selectAll">
Select all
</button>
<button @click="selected = []">
Select none
</button>
<label v-for="n in items">
<input v-model="selected" type="checkbox" :value="n">
{{ …我正在使用 Eloquent 从数据库返回一些数据并放入数组对象中。我对浏览器的响应对象以这种格式显示：
// response()->json($response, 200);
[{
"id": 1,
"name": "car",
"make": ["bmw", "ford"]
"order": 1
},
{
"id": 2,
"name": "bike",
"make": ["aprilia"]
"order": 2
},
{
"id": 3,
"name": "boat",
"make": []
"order": 3
},
(...)
]
不过，在返回之前，我想在服务器端对其进行过滤。所以我只返回在"make"数组中保存值的对象。
所以我正在运行这个循环：
foreach ($response as $key => $transport) {
if (count($response[$key]['make']) == 0) {
unset($response[$key]);
};
}
php 所做的是将数组转换为对象，并为每个内部对象添加键。所以现在我的$response样子：
// response()->json($response, 200);
{ // notice here it has changed from array to object
"0": { // notice …具有以下代码，其中每个 P 标签由边距分隔：
document.addEventListener("click", function(e) {
console.log(e.target);
});* {
box-sizing: border-box;
}
div {
height: 100px;
border: 1px solid blue;
}
p {
margin: 20px;
border: 1px solid red;
}<div>
<p>
Lorem
</p>
<p>
Lorem 2
</p>
</div>当我捕获P标签之间的点击事件时，返回的节点是DIV。点击P标签边距后如何返回P标签？我不允许将边距更改为填充，这将是一个简单的解决方案。