KRI*_*INI 2 javascript vue.js vuetify.js vue-reactivity
因此，在 Vue 组件中，当您在模板中编写标签时，您可以像在普通 XML 中一样指定静态参数，或者可以通过在参数名称前面添加冒号来指定响应式参数。
现在，我偶然发现了这个Vuetify 示例，并使用了该v-menu组件。例如，该组件具有一个close-on-click属性，在此示例中，该属性被标记为反应性的。这是合乎逻辑的，因为在本例中，当您更改开关的位置时，该属性也会更新。
但是，您也可以指定一个常量。而且，由于常量值不会改变，因此在 Vue 中，它们不必是响应式的。但是，在这里，如果我指定close-on-click（不带冒号），它将无法正常工作。除非它是反应性的，否则它不会读取此属性。
我的问题是，为什么即使我们指定一个常量作为它的值，这个属性也需要被标记为反应性的？
那么，更准确地说：为什么<v-menu close-on-click=false不起作用，但是却<v-menu :close-on-click="false"起作用了？
false是一个常量，因此，该属性不应标记为反应性的。
总而言之：
反应性使用绑定来更新模板，但并非所有绑定都一定是反应性的。这个答案试图澄清这两个相关但独立的概念之间的区别。
简短回答：
它不需要是“反应式”的。它需要被“绑定”（评估为 JavaScript 表达式）。使用...
<v-menu close-on-click="false" />
...将字符串绑定"false"到属性close-on-click。由于该属性需要一个布尔值，"false"因此计算结果为true，因为除空字符串 ( ) 之外的任何字符串在转换为 时""都会计算为。和...trueboolean
<v-menu :close-on-click="false" />
绑定 JavaScript 表达式 的结果false，显然其计算结果为false。
这与反应性无关。:它与评估作为字符串（不带）或 JavaScript 表达式（带）传递给属性的值有关:。
长/正确答案：
您混淆了两个相似但不同的概念。
其中之一是“反应性”，另一个是通过使用 JavaScript 表达式进行“动态绑定” 。
属性前面的冒号 ( :) 用于动态绑定，而不是用于反应性。
:是 的简写v-bind:。
将绑定视为{{ }}（小胡子）模板绑定的替代方案，但专为元素属性和道具而设计（因为小胡子在属性中不起作用）。正如 Mustache 语法一样，v-bind:可用于将反应式和非反应式表达式绑定到模板。
当表达式的结果更改时，非反应式表达式不会更新模板。
Vue 中的“反应性”是一个术语，用于表示 Vue 检测数据结构变化并在检测到变化时使用这些数据结构更新表达式的“神奇”能力。
反应式对象的一些示例：
data()Options API 中函数返回的对象Vue.observable()，在 Vue 2.x 中@vue/composition-api的结果。ref()reactive()piniaand vuex、$router/$route等中存储状态），但是，在幕后，所有反应式对象都是上述情况之一的实现。实际上，反应性是一个包装器。在 Vue2 中，如果你检查一个响应式对象，你会注意到[__ob__: Observer]它的一个属性。那是反应观察者。
在Vue3中，它不再是一个Observer，而是一个Proxy。
主要区别在于，在 Vue3 中，原始对象（代理的目标）实际上未受影响。此外，使用代理进行变更检测更加直接。
如果有兴趣，网上有很多材料，通常标记为“高级 vue 反应性”或“vue 深度反应性”。
为了更清楚地理解，这里有一个绑定两个表达式的示例：一个是静态的，一个是反应性的。显然，只有响应式模板在结果发生变化时才会更新：
<v-menu close-on-click="false" />
<v-menu :close-on-click="false" />
注意：尽管我在上面的示例中使用了(mustache 语法)，但当您在元素属性中使用或其较短版本{{}}时，也会发生同样的情况。v-bind::
我希望这能澄清“反应性”和“绑定”之间的区别。
| 归档时间： |
|
| 查看次数： |
1368 次 |
| 最近记录： |