Vue数据监视的原理

         Vue监视数据的原理
            1. vue会监视data中所有层次的数据
            2. 如何监测对象中的数据？
                通过setter实现监视，且要在new Vue时就传入要监测的数据
                    1、对象中后追加的属性，Vue默认不做响应式
                    2、如需给后添加的属性做响应式，请用如下API：
                        Vue.set(target,propertyName/index,value) 或
                        vm.$set(target,propertyName/index,value)
            3. 如何监视数组中的数据？
                通过包裹数组更新元素的方法实现，本质就是做了两件事
                1、调用原生对应的方法对数组进行更新
                2、重新解析模板，进而更新页面
            4. 在Vue修改数组中的某个元素一定要用以下方法：
                1.API: push(),pop(),shift(),unshift(),splice(),sort(),reverse()
                2.Vue.set() 或vm.$set()
            特别注意：Vue.set() 或vm.$set()不能给vm或vm根对象 添加属性！！

 <body>
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1岁</button><br>
        <button @click="addSex">添加性别属性，默认值为：男</button><br>
        <button @click.once="addFriend">在列表首位添加一个朋友</button><br>
        <button @click="updateFriend">修改第一个朋友的名字为：张三</button><br>
        <button @click.once="addHobby">添加一个爱好</button><br>
        <button @click="updateHobby">修改第一个爱好为：开车</button><br>
        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
 
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们：</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#root",
            data: {
                student:{
                    name:"林",
                    age:20,
                    hobby:["Vue","JAVA"],
                    friends:[
                        {
                            name:"彪",
                            age:20
                        },
                        {
                            name:"杰",
                            age:20
                        }
                    ]
                }
            },
            methods: {
                addSex(){
                    // Vue.set(this.student,"sex","男");
                    this.$set(this.student,"sex","男");
                },
                addFriend(){
                    this.student.friends.unshift({name:"李氏",age:12})
                },
                updateFriend(){
 
                    // 通过数组中添加的对象，它其中的属性也是响应式的
                    //(有get name: ƒ reactiveGetter()
                    // set name: ƒ reactiveSetter(newVal))
                    this.student.friends[0].name="张三";
                },
                addHobby(){
                    this.student.hobby.unshift("听音乐");
                },
                updateHobby(){
                    this.student.hobby.splice(0,1,"开车");
                }
 
            },
        })
    </script>
</body>

posted @ 2022-07-17 16:19 小罗要有出息阅读(142) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue监视属性

· Vue的数据代理原理

· 监视数据的原理

· Vue 监视数据的原理

· Vue.js 总结Vue监视数据

公告

昵称：小罗要有出息
园龄： 3年2个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

小罗要有出息

Vue数据监视的原理

公告

搜索

常用链接

随笔分类

随笔档案

文章分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	Vue监视数据的原理
	1. vue会监视data中所有层次的数据
	2. 如何监测对象中的数据？
	通过setter实现监视，且要在new Vue时就传入要监测的数据
	1、对象中后追加的属性，Vue默认不做响应式
	2、如需给后添加的属性做响应式，请用如下API：
	Vue.set(target,propertyName/index,value) 或
	vm.$set(target,propertyName/index,value)
	3. 如何监视数组中的数据？
	通过包裹数组更新元素的方法实现，本质就是做了两件事
	1、调用原生对应的方法对数组进行更新
	2、重新解析模板，进而更新页面
	4. 在Vue修改数组中的某个元素一定要用以下方法：
	1.API: push(),pop(),shift(),unshift(),splice(),sort(),reverse()
	2.Vue.set() 或vm.$set()
	特别注意：Vue.set() 或vm.$set()不能给vm或vm根对象添加属性！！

	<body>
	<div id="root">
	<h1>学生信息</h1>
	<button @click="student.age++">年龄+1岁</button><br>
	<button @click="addSex">添加性别属性，默认值为：男</button><br>
	<button @click.once="addFriend">在列表首位添加一个朋友</button><br>
	<button @click="updateFriend">修改第一个朋友的名字为：张三</button><br>
	<button @click.once="addHobby">添加一个爱好</button><br>
	<button @click="updateHobby">修改第一个爱好为：开车</button><br>
	<h3>姓名：{{student.name}}</h3>
	<h3>年龄：{{student.age}}</h3>
	<h3 v-if="student.sex">性别：{{student.sex}}</h3>

	<h3>爱好：</h3>
	<ul>
	<li v-for="(h,index) in student.hobby" :key="index">
	{{h}}
	</li>
	</ul>
	<h3>朋友们：</h3>
	<ul>
	<li v-for="(f,index) in student.friends" :key="index">
	{{f.name}}--{{f.age}}
	</li>
	</ul>
	</div>
	<script>
	Vue.config.productionTip = false;
	const vm = new Vue({
	el: "#root",
	data: {
	student:{
	name:"林",
	age:20,
	hobby:["Vue","JAVA"],
	friends:[
	{
	name:"彪",
	age:20
	},
	{
	name:"杰",
	age:20
	}
	]
	}
	},
	methods: {
	addSex(){
	// Vue.set(this.student,"sex","男");
	this.$set(this.student,"sex","男");
	},
	addFriend(){
	this.student.friends.unshift({name:"李氏",age:12})
	},
	updateFriend(){

	// 通过数组中添加的对象，它其中的属性也是响应式的
	//(有get name: ƒ reactiveGetter()
	// set name: ƒ reactiveSetter(newVal))
	this.student.friends[0].name="张三";
	},
	addHobby(){
	this.student.hobby.unshift("听音乐");
	},
	updateHobby(){
	this.student.hobby.splice(0,1,"开车");
	}

	},
	})
	</script>
	</body>