使用 js 实现一个最简化的 v-show

Vue 一个非常重要的思想就是数据驱动视图，v-show 就是一个实现数据驱动的原理的一个简单例子。

大致思路：

1. 获取 v-show 属性的初始值

2. 定义一个方法操作 dom 的显示和隐藏

3. 对绑定的数据进行 setter 和 getter 数据劫持

<button onClick="model.isShow = true">显示</button>
<button onClick="model.isShow = false">隐藏</button>

<div v-show="isShow">Hello World！</div>

<script>
// 第 1 步: 定义数据和视图
let model = {
  isShow: false
}

// 第 2 步: 定义视图刷新方法
let view = document.querySelector('div')
const updateView = function(value) {
  view.style.display = value ? '' : 'none'
}

// 第 3 步: 设置初始视图表现
var directiveKey = view.getAttribute('v-show')
updateView(model[directiveKey])

// 第 4 步: 监听数据变化，然后刷新视图，达到数据驱动的目的
model=new Proxy({},{
    set(target,propKey,value){
        updateView(value)
        return Reflect.get(target, propKey, value);
    }
})  
</script>