vue3和vue2有什么区别?
vue3新添了很多类似于react的hook,只是为了方便代码管理,为了方便后期项目维护,用setup代替了data,很多操作直接放在setup中进行操作
不过vue3和vue2在双向数据绑定上还是有区别的,对数组的监听也有不同
vue3通过proxy代理进行双向数据绑定和数组监听,可以直接监听到数组中的变化,但是vue2不可以直接监听数组的变化,需要通过 $set进行强制更新视图
vue3进行proxy双向数据绑定
<body>
<input type="text" id="ipt">
<h3 id="text"></h3>
<script>
let obj = {value:'你好世界'};
//封装函数
function reactive(obj) {
return new Proxy(obj, {
get(tar,pro) {
return tar[pro];
},
set(tar,pro,value) {
ipt.value = value;
text.innerText = value;
}
})
}
const re = reactive(obj);
//获取元素
let ipt = document.getElementById('ipt');
let text = document.getElementById('text');
//赋值
ipt.value = re.value;
text.innerText = re.value;
//input事件
ipt.addEventListener('input',e=> {
re.value = e.target.value;
})
</script>
</body>