web-frontend 相关问题

这是代码 {{ 反应变量 }} 这是代码 <template> <input type="button" value="click" @click="clickBtn"/> <div id="reactiveDiv">{{ reactiveVariable }}</div> <div id="noneReactiveDiv">{{ noneReactiveVariable }}</div> </template> <script setup lang="ts"> import { ref, nextTick } from "vue" const reactiveVariable = ref('reactive') let noneReactiveVariable = 'non reactive ' function clickBtn(){ reactiveVariable.value = (new Date().getTime()).toString() noneReactiveVariable = (new Date().getTime()).toString() nextTick(()=>{ console.log('next tick') }) } </script> 我有两个变量：reactiveVariable是反应性的，noneReactiveVariable不是。我的问题是：当我单击按钮时，模板中的两个变量都会更改。我认为 noneReactiveVariable 不应更改，因为它的定义没有 ref 或 React 关键字。我的猜测是反应变量reactiveVariable的值变化导致模板更新并导致模板中的noneReactiveVariable也发生变化。我不确定。如果我像这样更改模板： <template> <input type="button" value="click" @click="clickBtn"/> <div id="noneReactiveDiv">{{ noneReactiveVariable }}</div> </template> 在这种情况下，当我单击按钮时，模板中的 noneReactiveVariable 不会更改。现在看来还可以。但我在函数 clickBtn 中有一个 nextTick，当我单击按钮时，我可以看到登录控制台，这意味着 UI 或模板已更新。我想如果模板更新了，为什么模板中的noneReactiveVariable没有像以前一样变化，reactiveVariable的变化导致了noneReactiveVariable的变化？所以我最近才开始使用 VueJs，但据我了解，当您使用通过“ref”或“reactive”创建的响应式变量时，Vue 会在内部跟踪其依赖关系，从而允许它在响应式变量更改时自动更新模板。 Vue 的反应系统足够智能，可以检测反应变量的变化并触发模板的重新渲染。在您的第一段代码中，reactiveVariable 和 noneReactiveVariable 都在模板中呈现。当reactiveVariable发生变化时，Vue会检测到这种变化并更新模板的相应部分。在第二段代码中，仅渲染 noneReactiveVariable 。当reactiveVariable发生变化时，Vue不依赖于noneReactiveVariable，因此不会触发模板中noneReactiveVariable的更新。关于你的最后一个问题，我不确定nextTick功能，但据我通过阅读文档了解https://nodejs.org/en/docs/guides/event-loop-timers-and -下一个标记。它用于等到下一个 DOM 更新周期后再执行提供的回调。即使调用了nextTick，也不意味着模板会立即更新。它只是确保在 DOM 更新以响应当前状态更改后执行回调。因此，在您的情况下， console.log('next tick') 将在 DOM 更新后执行，但由于 noneReactiveVariable 不是第二段代码中的反应性依赖项，因此它不会触发模板更新变化。

javascript vue.js vuejs3 reactive web-frontend

回答 1 投票 0

用于前端和后端策略评估的开放策略代理（OPA）

我们有一个业务应用程序，其中有许多 OPA 似乎非常适合的策略规则。举一个简单的例子：“如果用户处于 r 状态，订单可以从状态‘X’修改为‘Y’……

javascript policy web-frontend open-policy-agent

回答 1 投票 0

如何将Web套接字应用到React中的所有客户端和所有组件？

所以我尝试在第一个组件中创建像以下代码这样的websocket：从 'react' 导入 { useState,useEffect } 从“./components/routers/Routes”导入路由函数应用程序（）{ const ws=新网站...

reactjs websocket django-channels web-frontend

回答 1 投票 0

Div 在移动网站上不再左对齐

我正在从其桌面版本创建一个心理健康网站，我想将 div 与移动视图的左侧对齐。在 div 内，有一个输入文本字段和两个按钮作为一部分......