vue双向数据绑定的底层原理:
object这个对象有个方法,叫做defineProperty
,当数据发生访问或者修改,它都能够监测到,就是做到了一个数据劫持
。
一旦数据变化,他就会立即通知相关DOM更新页面,这个就用到了发布订阅者模式
<!-- Object.defineProperty -->
<!-- 数据劫持 -->
<!-- 发布订阅者模式 -->
<script>
var book = {};
var name = "";
// 参1: 要给哪个对象设置属性
// 参2: 属性名称是啥
// 参3: 对象, 封装set和get方法
Object.defineProperty(book, "name", {
// 一旦修改了属性, 就会走到set方法中, value表示修改的内容
// book.name = "xxx"
set: function (value) {
name = value;
// 检测到数据变化的时候, 更新一下dom
$("h1").text(value);
$("input").val(value)
},
// 一旦读取属性, 就会走到get方法中
// book.name
get: function (value) {
return name;
}
});
//input事件: 只要文本框内容发生了变化, 就会执行回调函数
$("input").on("input", function () {
book.name = $(this).val(); //返回值, 决定了将来调用book.name返回的值
});
var num = 0;
$("button").click(function () {
book.name = num++;
console.log(book.name);
});
</script>
注:
1.发布订阅者模式
2.双向数据绑定指令:v-model
3.从浅层次上来说,v-model是 v-bind(数据变->文本框变) 和 v-on的change事件(文本框变->数据变) 的结合体