Object.defineProperty的缺点在于不能进行一些响应式删除和修改，但也有解决办法
如果没有发生响应式变化，可能是因为Object.defineProperty用来操作对象而不是数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div @click="qq">
{{isAgree.msg}}
</div>
<div>
{{isAgree.ww}}
</div>
<div>
{{isAgree.qq}}
</div>
<h2 v-for="(item,index) in isAgree.web" :key="index">{{item}}</h2>
<button @click="updateweb">点击</button>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
isAgree: {
msg: 'zhangsan',
web: ['html', 'js']
}
}
},
methods: {
qq() {
// 不能响应式进行新增和删除
// this.isAgree.ww = 'list'
// console.log(this.isAgree.ww);
// delete this.isAgree.msg
// console.log(this.isAgree.msg);
// 解决办法
Vue.set(this.isAgree, 'ww', 'list')
// // 方式二 // this.$set(this.isAgree,'qq','2')
Vue.delete(this.isAgree, 'msg')
// // 方式二 // this.$delete(this.isAgree, 'msg')
},
updateweb() { //没有发生响应式变化，因为Object.defineProperty用来操作对象而不是数组
this.isAgree.web[0] = 'lili'
console.log(this.isAgree.web[0]);
}
}
})
</script>
</body>
</html>
3857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
