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

---

   Vue的双向数据绑定原理：借助Object.defineProperty()对数据进行劫持，并结合发布-订阅者模式，来实现双向数据绑定 
    <div id='app'>
        <input type="text" v-model="iptVal">
        <p>{{iptVal}}</p>
    </div>  
    <script>
        new Vue({
            el:'#app',
            data:{
                iptVal:"初始值"
            }
        })
    </script>

    <input type="text" id="ipt">
    <p id="op"></p>

    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中的数据在变化