Vue之双向绑定
双向数据绑定
将DOM与Vue实例的data数据绑定到一起,彼此间互相影响。
- 数据的变化会引起DOM的改变
- DOM的改变也会引起数据的变化
原理
当把一个普通的Javascript对象传入Vue实例作为data选项时,Vue会遍历这个对象的所有属性,并使用Object.defineProperty( )来把每个属性转为setter和getter。这些setter和getter对用户来说不可见,但是在内部会让Vue能够追踪依赖,在属性被访问和修改时通知变更。
每个组件实例都对应一个watcher实例,它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后,当依赖项的sette触发时,会通知watcher,从而使它关联的组件重新渲染。
什么是响应式:简单来说,当你的数据发生变化时,视图也进行相应的更新。
响应式数据
只有data中的数据(程序创建时data里的属性)才是响应式的,动态添加进来的数据默认为非响应式的。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id ="app">
<p>{
{stu}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data: {
stu: {
name:"Jona",
age:19
}
}
})
vm.stu.width = "666";
Vue.set(vm.stu,"gender","male");
</script>
</body>
</html>
此时,如果在console中修改stu.width的值,视图不会发生更新。
这主要因为,data中的属性,