数据绑定

Fri, 04 Oct 2024 00:00:00 +0800

1. 定义

1.1 双向绑定 & 单向绑定

vue的双向绑定，即数据与视图的响应式设计。具体表现为：View的改变能实时让Model发生变化，而Model的变化也能实时更新View。

什么情况下用户可以更新View呢？如：填写表单。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于把Model和View做了双向绑定。

注意区别：单向数据绑定，所有数据只有一份，一旦数据变化，就去更新页面(只有data–>DOM，没有DOM–>data)。

用户在页面作出更新，需要用户手动收集(双向绑定是自动收集)，在合并到原有的数据中。

Vue.js中的v-model主要用在表单的input输入框，完成视图和数据的双向绑定：

<!DOCTYPE html>
<html>
<head></head>
<body>
 <div id="app">
 <input type="text" v-model="message">
 <p>{{message}}</p>
 </div>
 <script>
 var app = new Vue({
 el: '#app',
 data: {
 message: ''
 }
 });
 </script>
</body>
</html>

1.2 v-model来添加双向绑定

<input v-model="xxx">

<!-- 上面的代码等价于 -->
<input :value="xxx" @input="xxx = $event.target.value">
<!-- 双向绑定 = 单向绑定 + UI事件监听 -->

1.3 双向绑定、单向绑定的优缺点

单向绑定：数据流也是单向的，对于复杂应用来说是实施统一状态管理（如redux）的前提。
双向绑定：在一些需要实时反应用户输入的场合会非常方便（如多级联动菜单）。但常认为复杂应用中这种便利比不上引入状态管理带来的优势。因为不知道状态什么时候发生改变，是谁造成的改变，数据变更也不会通知。

响应式的思路：mvvm Model，View，View-Model

2. 原理概述