vue如何实现对新增数据进行监听
在对vue实例data中的数据进行操作时，因为vue是mvvm设计模式，vm层实现数据双向绑定，原理是Object,definePrototype(),而这个函数的触发是通过数据劫持（ Observer）监听者实现的不难发现vue中数据不过是原始数据类型还是引入数据类型，vue对其都有设置监听，这个observer的是不是监听不到了呢？肯定监听不到，就像下面的下标为4的数据在数据发生变化是vue是
·
在对vue实例data中的数据进行操作时，因为vue是mvvm设计模式，vm层实现数据双向绑定，原理是Object,definePrototype(),而这个函数的触发是通过数据劫持（ Observer）监听者实现的
不难发现vue中数据不过是原始数据类型还是引入数据类型，vue对其都有设置监听，这个observer的是不是监听不到了呢？肯定监听不到，就像下面的下标为4的数据在数据发生变化是vue是监听不到的，所以这个数据不会实现的数据的双向绑定，但是vue有对这个整一个数组进行监听，所以当其他数据发生变化时，这条数据才会被监听才会在页面中体现出来
说半天就是为了区分这个两种给vue添加数据方法的去吧
前者不会有监听者
后者有
this.items[this.items.length] = {message:"Test l",id:"9199"}
Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app2">
<p v-for="(item,i) in items" :key="i">
{{item.message}}
<input @input="showitem" v-model="item.message" />
</p>
<button class="btn" @click="btn2Click()">动态属性值</button><br/>
<button class="btn" @click="btn2Click()">动态赋值</button><br/>
<button class="btn" @click="btn4Click()">push添加一条数据</button><br/>
<button class="btn" @click="btn3Click()">为data新增属性</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm2=new Vue({
el:"#app2",
data:{
items:[
{message:"Test one",id:"1"},
{message:"Test two",id:"2"},
{message:"Test three",id:"3"}
]
},
methods:{
showitem(){
console.log(this.items)
},
btn1Click:function(){
Vue.set(this.items[2],'message','1111')
console.log(this.items)
},
btn2Click:function(){
Vue.set(this.items,1,{message:"我发生了改变",id:"2"},)
console.log(this.items)
},
btn3Click:function(){
var itemLen=this.items.length;
Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
console.log(this.items)
},
btn4Click:function(){
this.items.push( {message:"Test push",id:"999"})
this.items[this.items.length] = {message:"Test l",id:"9199"}
console.log(this.items)
}
}
});
</script>
</body>
</html>
</script>
</body>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献6条内容
所有评论(0)