v-text 数据变化反应到视图

 <div id="app">
        <div v-text='name' class="aaa"></div>
    </div>
    <script>
        let data = {
            name: '某某莫'
        }
       document.querySelector('.aaa').innerText = data.name
        Object.keys(data).forEach((item) => {
            // 处理每一个对象的item转变成响应式
            observe(data, item, data[item])
        })
        // 声明一个函数   get和set的形式
        function observe(data, name, value) {
            Object.defineProperty(data, name, {
                get() {
                    console.log(`你访问了data的${name}属性`)
                    return value
                },
                set(newValue) {
                    if (newValue === value) {
                        return
                    }
                    console.log(`你修改了data的${name}属性`)
                    value = newValue
                    compile()
                }
            })
        }
 
        function compile() {
            let childNodes =  document.querySelector("#app").children  //获取ul元素的所有元素子节点
            childNodes = childNodes[0]
            //获取元素上的属性
            let attrs = childNodes.attributes
             //  Array.from(attrs)将attrs转化为数组
             Array.from(attrs).forEach((attr) => {
             let nodeName = attr.nodeName
             let nodeType = attr.nodeValue
             console.log(nodeName, nodeType)
                      if (nodeName === 'v-text') {
                            childNodes.innerText = data[nodeType]
                        }
                    })
        }
</script>