vue2响应式学习小记

记录在学习vue2基础时发现页面渲染时而生效，时而不生效时所记录的小笔记，不足之处请大佬们多多指教！

实现原理

对象数据

类型主要是通过Object.defineProperty()对属性进行读取和修改进行数据劫持。

数组类型

重写数组的方法实现拦截，对数组的变更方法进行包裹。

问题

对属性进行新增、删除操作后，界面不会进行更新。

<template>
	<div style="text-align:center;">
		<p>姓名：{{obj_data.name}}</p>
		<p>年龄：{{obj_data.age}}</p>
		<p>性别：{{obj_data.sex}}</p>
		<button @click="changClick"> 点击 </button>
	</div>
</template>
<script>
	export default {
		data(){
			return{
				obj_data:{
					name:'花花',
					age:'18',
				}
			}
		},
		methods:{
			changClick(){
				this.obj_data.sex = '女'//新增对象属性
				delete(this.obj_data.age ) //删除对象属性
			}
		}
	}
</script>

点击后页面数据渲染并未发生改变解决方法。

<script>
	import Vue from 'vue'
	export default {
		data(){
			return{
				obj_data:{
					name:'花花',
					age:'18',
				}
			}
		},
		methods:{
			changClick(){
				// this.obj_data.sex = '女'//新增对象属性页面无响应
				// delete(this.obj_data.age ) //删除对象属性页面无响应
				this.$set(this.obj_data,'sex','女') //1新增对象属性页面无响应解决方式 $set(）或 Vue.set(）注：需引入vue，给对象中追加一个属性
				// Vue.set(this.obj_data,'sex','女') 
				this.$delete(this.obj_data,'age') //删除属性页面无响应解决方式 $delete(）或 Vue.set(）给对象中删除一个属性
				// Vue.delete(this.obj_data,'age')
			}
		}
	}
</script>

通过下标修改数组信息页面不会更新解决方法。

<template>
	<div style="margin-left: 10px;">
		花花喜欢吃：<span v-for="(item,index) in food" :key='index'>{{item}} </span>
		<button @click="changClick"> 点击 </button>
	</div>
</template>
<script>
	import Vue from 'vue'
	export default {
		data(){
			return{
				food:['苹果','披萨','拉面','蛋糕']
			}
		},
		methods:{
			changClick(){
				// this.food[0] = '螺蛳粉' //通过下标修改数组中的值页面无响应
				this.$set(this.food,0,'螺蛳粉') //解决方式 1 this.$set(） 2 Vue.set() 3 this.food.splice()
				// Vue.set(this.food,0,'螺蛳粉') 
				// this.food.splice(0,1,'螺蛳粉')
			}
		}
	}
</script>

注：以上这些问题在vue3中都是已经得到解决了哟！