vue $set和$delete
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue $set和$delete相关的知识，希望对你有一定的参考价值。
参考技术A div id="app"><button @click="setName">修改obj的name</button>
<button @click="addSex">添加obj的sex</button>
<button @click="delAge">删除obj的age</button>
<h1>obj</h1>
</div>
<script src="./vue2.6.14.js"></script>
<script>
new Vue(
el: "#app",
data()
return
obj:
name:"张三",
age:20
,
methods:
setName()
/* 修改了data中的数据 视图也会发生改变
双向数据绑定 */
this.obj.name = '李四'
,
addSex()
/* vue2里面有个缺陷 就是添加属性的时候视图不会更新
不能实现双向数据绑定 */
/* this.obj.sex = '男' */
/* 底层使用的 Object.defineProperty 可以实现修改和查看
但是监听不到属性的添加和删除*/
/* vue3 就不使用Object.defineProperty了，使用了proxy方法
，使用了这个方法就可以直接的使用原生的添加 和 删除方法了，
还可以实现双向数据绑定 */
console.log(this.obj);
/* 要解决添加属性显示在视图中，必须要使用vue
中的$set方法去实现双向数据绑定 */
/* this.$set(this.obj,'sex','男') */
/* this.$forceUpdate(this.obj) */
,
delAge()
/* vue2里面不能直接使用对象删除的方法，
实际上数据已经被删除，但是视图没有更新，
不能实现双向数据绑定 */
/* delete this.obj.age */
/* vue为了解决删除数据后视图不更新的问题，提供了
$delete方法来实现双向数据绑定 */
/* 底层使用的 Object.defineProperty 可以实现修改和查看
但是监听不到数据的添加和删除*/
/* vue3 就不使用Object.defineProperty了，使用了proxy方法
，使用了这个方法就可以直接的使用原生的添加 和 删除方法了，
还可以实现双向数据绑定 */
this.$delete(this.obj,'age')
console.log(this.obj);
,
)
</script>
以上是关于vue $set和$delete的主要内容，如果未能解决你的问题，请参考以下文章