目录
添加/修改：Vue.set(target,value) vm.$set(同左) 删除：Vue.delete(target,key) vm.$set(同左)
数据监测的原理：
1、vue会监视vue实例中data中所有的数据。
2、监测数据要在new vue实例时就传入数据，后追加的属性默认不做响应式处理，
通俗说就是data中数据实际已经添加，但是页面不会显示出来。
(1)监测对象:通过数据代理的setter方法实现监视
(2)监测数组:调用原生的pop(),push()等方法更新数组，然后重新解析模板，更新页面
3、如何响应式的修改对象和数组中的属性
(1)对象:vue.set() vm.$set()
(2)数组:1、push(),pop(),shift(),unshift(),splice()等
2、vue.set() vm.$set()
vue.set() vm.$set()不能给vm或者vm的根数据对象添加属性！！！！！
1、监测的data中所有的数据
vue实例中data数据：
页面：
2、后追加的默认不做响应式处理
3、如何响应式的修改对象和数组中的属性
对象：
Vue.set(target, key, val) vm.$set(同左)
Vue.set(选中对象例如vm下的hobby对象, 属性的键值,属性具体的值)
嵌套对象只需要改变target的值，方法一样。
数组：
通过 push(),pop(),shift(),unshift(),splice()等修改
push() 方法可把参数指定的元素依次添加到数组的末尾，返回添加元素后的数组长度。
unshift() 方法可把参数指定的元素依次添加到数组的前面，并返回添加元素后的数组长度。
pop() 方法可弹出（删除）数组最后一个元素，并返回弹出的元素。
shift() 方法可删除数组第一个元素，并返回删除的元素。
splic() 方法功能比较强，它可以实现删除指定数量的元素、替换指定元素以及在指定位置添加元素。这些不同功能的实现需要结合方法参数来确定：
当参数只有 index 和 count 两个参数时，如果 count 不等于 0，splice() 方法实现删除功能，同时返回所删除的元素：从 index参数指定位置开始删除 count 参数指定个数的元素；
当参数为 3 个以上，且 count 参数不为0时，splice() 方法实现替换功能，同时返回所替换的元素：用第三个及其之后的参数替换 index 参数指定位置开始的 count 参数指定个数的元素；
当参数为 3 个以上，且 count 参数为 0 时，splice() 方法的实现添加功能：用第三个及其之后的参数添加到 index 参数指定位置上。
splic(索引开始，操作位数，具体值)
splic(0,2,'haha')从0开始，操作两位，放入值haha
通过vue.set() vm.$set() #括号中内容相同
添加/修改：Vue.set(target,value) vm.$set(同左) 删除：Vue.delete(target,key) vm.$set(同左)
4、代码中实现
vm替换为this，在代码中this对象就是实例对象vm
<body>
<div id="root">
<h2>{
{ name }}</h2>
<hr>
<h2>爱好(对象)</h2>
<ul v-for="(h,index) in hobby" :key="index">
<li>{
{ h }}</li>
</ul>
<hr>
<h2>能力(数组)</h2>
<ul v-for="(a,index) in ability" :key="index">
<li>{
{ index+1 }} - {
{ a }}</li>
</ul>
<input type="text" placeholder="输入id" v-model.lazy="arrid">
<input type="text" placeholder="输入内容" v-model.lazy="arrval">
<button @click="arrdel">删除(只输入id)</button>
<button @click="arradd">添加(只输入内容)</button>
<button @click="arrupdata">修改</button>
<hr>
<h2>老铁们(对象嵌套)</h2>
<ul v-for="(f,index) in friends" :key="index">
<li>{
{ f.id }} - {
{ f.name }} - {
{ f.age }}
</li>
</ul>
<button @click="add">添加/修改老铁</button>
<button @click="delf">删除(只输入id)老铁</button>
<input type="text" placeholder="请输入id" v-model.lazy="cid">
<input type="text" placeholder="请输入姓名" v-model.lazy="cname">
<input type="text" placeholder="请输入年龄" v-model.lazy="cage">
</div>
<script>
Vue.config.productionTip=false
const vm = new Vue({
el:'#root',
data:{
name:'小明',
hobby:{
a:'打豆豆',
b:'打台球',
},
friends:{
f1:{
id:'1',
name:'小网',
age:'12',
},
f2:{
id:'2',
name:'小羽',
age:'15',
},
},
ability:['python','vue','php','java'],
cname:'',
cage:'',
cid:'',
arrid:'',
arrval:'',
},
methods: {
add(){
// Vue.set(this.friends,'f'+this.cid,{id:this.cid,name:this.cname,age:this.cage}) //方法一
this.$set(this.friends,'f'+this.cid,{id:this.cid,name:this.cname,age:this.cage}) //方法二
this.cid = '';
this.cname = '';
this.cage = '';
},
delf(){
Vue.delete(this.friends,'f'+this.cid)
this.cid = '';
this.cname = '';
this.cage = '';
},
arradd(){
this.ability.unshift(this.arrval);
this.arrval = '';
},
arrdel(){
if (this.arrid > 0) {
this.ability.splice(this.arrid-1,1);
this.arrid = '';
} else {
alert('id不存在')
this.arrid = '';
}
},
arrupdata(){
if (this.arrid > 0) {
this.ability.splice(this.arrid-1,1,this.arrval);
this.arrid = '';
this.arrval = '';
} else {
alert('id不存在')
this.arrid = '';
this.arrval = '';
}
},
},
})
</script>
</body>