Vue2.0——数据绑定v-model_vue2输入框中绑定v-model的数据时给它加个判断,状态码为0时,为1时,为2时,为3时对-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_56607109/article/details/126994908

本文详细介绍了Vue2.0中的数据绑定v-model，包括响应式数据的概念、双向数据绑定和单向数据流的解释。内容涵盖数据劫持、发布者-订阅者模式在实现数据双向绑定中的应用，以及v-model的使用场景和修饰符如.lazy、.number和.trim的用途。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是响应式数据流？

如果内存中的数据变化了，页面UI会动态跟着刷新，这种数据就是响应式数据。采用数据劫持方式，即Object.defineProperty（）劫持data中各属性，实现响应式数据。
什么是双向数据绑定？

如果数据容器中的数据变了也会让页面刷新（dom操作让页面改变），如果用户操作dom，改变了页面，反之也让数据容器中的数据中的值改变。
什么是单向数据流？

单向数据流（Unidirectional data flow）方式使用一个上传数据流和一个下传数据流进行双向数据通信，两个数据流之间相互独立。
响应式数据的设计原理？

原理：
- vue2.0实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。（缺陷：只会劫持data里面的成员，如果是特殊的引用数据【比如数组下标】，不会劫持到引用数据内部的成员，3.0改善了这个缺陷，使用了代理）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z1DeGeWi-1663835822506)(image\image-20220831112650289.png)]
- vue3.0 使用es6 proxy，代理了data对象。
**笔试题有可能写：**最简单的实现方法
```
//利用 Object.defineProperty 自己实现双向数据绑定
<body>
    <div id="app">
      <input type="text" id="txt">
      <p id="show"></p>
    </div>
```