vue如何实现对新增数据进行监听

在对vue实例data中的数据进行操作时，因为vue是mvvm设计模式，vm层实现数据双向绑定，原理是Object,definePrototype(),而这个函数的触发是通过数据劫持（ Observer）监听者实现的不难发现vue中数据不过是原始数据类型还是引入数据类型，vue对其都有设置监听，这个observer的是不是监听不到了呢？肯定监听不到，就像下面的下标为4的数据在数据发生变化是vue是

奥吼吼~~

3211人浏览 · 2020-05-21 17:53:32

奥吼吼~~ · 2020-05-21 17:53:32 发布

在对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>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^