Vue2中的set方法---数组不可以触发

---

Vue的双向数据绑定原理：借助Object.defineProperty()对数据进行劫持，并结合发布-订阅者模式，来实现双向数据绑定

{{iptVal}}

var ipt=document.getElementById('ipt')
var op=document.getElementById('op')
// 需求： 模拟Vue的双向数据绑定（原理）
let obj = [10,20,30] // 相当于Vue中的data对象
let val = "初始值";
// 第三方的set
Object.defineProperty(obj, "iptVal", {
get(){
return val
},
set(newVal){ //newVal 接收等号后面的e.target.value
// 2、在这个方法中，做一些修改界面的操作（ipt的value值和op的innerHTML）
console.log("执行了set");
ipt.value = newVal;
op.innerHTML = newVal;
}
})
// 把iptVal的值绑定到 input 和 p标签身上去
// ipt，op 订阅者
ipt.value = obj.iptVal;
op.innerHTML = obj.iptVal;
// 1、用户输入的时候， 要修改 obj.iptVal的值
ipt.addEventListener("input",function(e){
// 发布修改
//修改 obj.iptVal的值， 修改成用户输入的内容
// obj.iptVal = e.target.value // 触发set方法
obj[0]=2000;
})
// Vue通过数据来控制界面，界面一旦有变化，实际上是data中的数据在变化