关于vue2.x响应式问题？
第一个问题: 给属性重新赋值成对象，是否是响应式的？
第二个问题: 给Vue实例新增一个成员是否是响应式的？
第三个问题: 通过索引和length修改数组是否是响应式的?
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
</style>
<script src='./js/vue.js'></script>
</head>
<body>
<div id='app'>
<button @click="change1">问题1</button>
<h1>{{ obj.message }}</h1>
<hr>
<button @click="change2">问题2</button>
<h1>{{ obj.newProperty }}</h1>
<hr>
<button @click="change3">问题3</button>
<ul>
<li v-for="(item,index) in list" :key="index">
{{ item }}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
obj : {
// 第一个问题: 给属性重新赋值成对象，是否是响应式的？
message : "默认信息",
// 第二个问题: 给`Vue`实例新增一个成员是否是响应式的？
},
// 第三个问题: 通过索引和length修改数组是否是响应式的?
list:["刘德华","张学友","郭富城","黎明"]
},
methods:{
change1 () {
this.obj.message = {
name:"Petrel!"
}
},
change2 () {
// 直接设置是无法响应式的
// this.obj.newProperty = "我是data里面新增加的属性"
// Vue.set 可以保证动态添加的新属性是响应式的
this.$set(this.obj,"newProperty", "我是data里面新增加的属性")
},
change3 () {
// this.list[0] = "郑伊健"
// 1、 使用索引不是响应式 解决方法如下
// this.$set(this.list,0,"郑伊健")
// this.list.length = 0
// 2、vue中使用length改变数组的长度也是不响应的，解决方法是使用this.arr.splice(0)---利用的是数组变异方法。
this.list.splice(0)
}
}
})
</script>
</body>
</html>
622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
