Vue面试题之（二）怎样理解 Vue 的单向数据流？

最新推荐文章于 2024-05-25 22:49:09 发布

Dreamer_xr

最新推荐文章于 2024-05-25 22:49:09 发布

阅读量2.7k

点赞数 3

分类专栏： Vue 文章标签： vue单项数据流 vue面试

本文链接：https://blog.csdn.net/xr510002594/article/details/101706403

版权

本文详细解析Vue的单向数据流原则，探讨v-model在input元素和组件上的应用，以及v-model的缺点和解决策略。通过分析，揭示v-model如何在单向绑定基础上实现双向数据绑定，同时指出子组件不应直接修改props，而是通过$emit派发事件通知父组件更新数据。

摘要由CSDN通过智能技术生成

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

v-model在使用的时候很像双向绑定的（实际上也是。。。），但是 Vue 是单项数据流，v-model 只是语法糖而已：

<input v-model="something" />
<input v-bind:value="something" v-on:input="something = $event.target.value" />

第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样：

<input :value="something" @input="something = $event.target.value" />

要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，通过 $event 把最新的 value 传递给 something。

我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论：
在给 input 元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 'i

关注

专栏目录