vue基础(四)：vue监测原理 对象/数组 & set() 及案例

拜可肖
109 阅读2分钟
vue监测原理 对象/数组 + set()
Vue监视数据的原理：
1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据？
    通过setter实现监视，且要在new Vue时就传入要监测的数据。
    (1).对象中后追加的属性，Vue默认不做响应式处理
    (2).如需给后添加的属性做响应式，请使用如下API：
    Vue.set(target，propertyName/index，value) 或 
    vm.$set(target，propertyName/index，value);// this.$set(this.object/array, propertyName/index, value);

3. 如何监测数组中的数据？
    通过包裹数组更新元素的方法实现，本质就是做了两件事：
    (1).调用原生对应的方法对数组进行更新。
    (2).重新解析模板，进而更新页面。
    【vue将被侦听的数组的变更方法进行了包裹，所以他们也将会触发视图更新】
4.在Vue修改数组中的某个元素一定要用如下方法：
    1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    2.Vue.set() 或 vm.$set()
    3.非变更方法的时候可以使用新数组替换旧数组 filter() concat() slice()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
  • 1.vue监测对象的数据改变原理
    • 1.加工data
    • 2.vm_data=data
    • 响应式原理：数据变-页面变 修改_data.name 会引起name对应的set_name调用 set_name写了一个调用 只要name发生变化 这个调用就会重新解析模板 生成新的虚拟dom 新旧dom对比 更新页面 1677464565953.png
    • obj.defineproperty 表面上行 实际不行会疯狂回调 导致内存溢出 1677465531870.png
    • vue底层写了一个构造函数 Observe 能够创建监视的实例对象 能够收到一个对象作为参数 image.png
    <script type="text/javascript" >
let data = {
   name:'尚硅谷',
   address:'北京',
}
//创建一个监视的实例对象，用于监视data中属性的变化
const obs = new Observer(data);
console.log(obs); // Observer{  } 里面有 name address get_name set_name set_address get_address	
//准备一个vm实例对象
let vm = {}
vm._data = data = obs; // 这个实例对象就拥有data上的属性再赋值给_data
function Observer(obj){
   //汇总对象中所有的属性形成一个数组
   const keys = Object.keys(obj)；
           console.log(keys,'Object.keys(obj)');// ['name','address']
   //遍历 给每一个属性添加get set方法
   keys.forEach((k)=>{
   // this是Observer的实例对象
   	Object.defineProperty(this,k,{
   		get(){
   			return obj[k]
   		},
   		set(val){
                        console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
   			obj[k] = val
   		}
   	})
   })
}
</script>
    vue写了一个递归 一直往下找 直到最后一个不是对象了停止
  • 2.Vue.set()方法 该api给后添加的data属性添加响应式
    • 后添加的数据是没有响应式的 使用Vue.set() vm.$set()都可以添加响应式
     <body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h1>学校信息</h1>
		<h2>学校名称：{{school.name}}</h2>
		<h2>学校地址：{{school.address}}</h2>
		<h2>校长是：{{school.leader}}</h2>
		<hr/>
		<h1>学生信息</h1>
		<button @click="addSex">添加一个性别属性，默认值是男</button>
		<h2>姓名：{{student.name}}</h2>
		<h2 v-if="student.sex">性别：{{student.sex}}</h2>
		<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
		<h2>朋友们</h2>
		<ul>
			<li v-for="(f,index) in student.friends" :key="index">
				{{f.name}}--{{f.age}}
			</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	const vm = new Vue({
		el:'#root',
		data:{
			school:{
				name:'尚硅谷',
				address:'北京',
			},
			student:{
				name:'tom',
				age:{
					rAge:40,
					sAge:29,
				},
				friends:[
					{name:'jerry',age:35},
					{name:'tony',age:36}
				]
			}
		},
		methods: {
			addSex(){
				// Vue.set(this.student,'sex','男')
				this.$set(this.student,'sex','男')
			}
		}
	})
</script>
  • 3.vue监测数组的数据改变原理
    • 1.数组里的元素不是靠set get来监听的 是调用原生对应的方法对数组进行更新
    • 2.重新解析模板 生成虚拟dom 进行页面更新... 包装数组身上的常用修改数组的方法实现的
    • 调用的不是Array.prototype.push 原型对象上的push 而是vue身上的
    • push vm_data.student.hobby.push !=Array.prototype.push
    • arr.push===Array.prototype.push
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el: '#root',
        data: {
            school: {
                name: '尚硅谷',
                address: '北京',
            },
            student: {
                name: 'tom',
                age: {
                    rAge: 40,
                    sAge: 29,
                },
                hobby: ['抽烟', '喝酒', '烫头'],
                friends: [{
                        name: 'jerry',
                        age: 35
                    },
                    {
                        name: 'tony',
                        age: 36
                    }
                ]
            }
        },
        methods: {
            addSex() {
                // Vue.set(this.student,'sex','男')
                this.$set(this.student, 'sex', '男')
            }
        }
    })
</script>
  • 案例
data: {
    student: {
        name: 'tom',
        age: 18,
        hobby: ['抽烟', '喝酒', '烫头'],
        friends: [{
                name: 'jerry',
                age: 35
            },
            {
                name: 'tony',
                age: 36
            }
        ]
    }
},
methods:{
 // 新增对象里的属性及默认值
 addSex() {
     // Vue.set(this.student, 'sex', '男')
     this.$set(this.student, 'sex', '男')
 },
 // 新增对象的数组里的对象
 addFriend() {
     this.student.friends.unshift({
         name: 'jack',
         age: 20
     });
 },
 // 修改对象里的数组里的对象
 updateFirstFriendName() {
     // this.student.friends[0].name = '张三'; // 这是个对象 对象里面有get set 所以就行
     this.$set(this.student.friends[0], 'name', '张三'); 
 },
 // 新增对象的数组
 addHobby() {
     this.student.hobby.push('学习');
 },
 // 修改对象里的数组里的对象
 updateHobby() {
     // this.student.hobby.splice(0,1,'开车');
     // this.$set(this.student.hobby, 0, '开车');
     Vue.set(this.student.hobby, 0, '开车'); 
 },
 // 过滤掉爱好里的抽烟
 removeSmoke() {
     const newHobby = this.student.hobby.filter((item) => {
         return item != '抽烟'
     });
     this.student.hobby=newHobby;
 }
}
avatar
文章
阅读
粉丝