vue 中data 中数组+nextTick原理

116 阅读1分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第24天
一、vue 中data 中数组
push()、pop()、shift()、unshift()、splice()、sort()、reverse()这些方法会改变被操作的数 组;filter()、concat()、slice()这些方法不会改变被操作的数组,返回一个新的数组;
以上方法都可以触发视图更新。
利用索引直接设置一个数组项,例:this.array[index] = newValue
直接修改数组的长度,例:this.array.length = newLength
以上两种方法不可以触发视图更新;
1.可以用 this.$set(this.array,index,newValue)或 this.array.splice(index,1,newValue)
2.可以用 this.array.splice(newLength)

二、vue中重置data
要初始化 data 中的数据,可以使用 Object.assign()方法,实现重置 data 中的数据,以下就是对该方法的详细介绍,以及如何使用该方法,重置 data 中的数据
1.Object.assign()方法基本定义
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
用法:
Object.assign(target, ...sources),第一个参数是目标对象,第二个参数是源对象,就是将源对象属性复制到目标对象,返回目标对象

2.具体使用方式
使用 Object.assign(),vm.data可以获取当前状态下的datavm.data 可以获取当前状态下的 data,vm.options.data(this)
可以获取到组件初始化状态下的 data,复制 Object.assign(this.data,this.data, this.options.data(this))
// 注意加 this,不然取不到 data() { a: this.methodA } 中的 this.methodA。

三、nextTick原理
1.为什么需要 nextTick ,Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM,但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理,这时候就可以使用Vue.nextTick(callback)这个 api 了。

2.理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有process.nextTick(Nodejs),Promise.then(), MutationObserver;

  1. 理解 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码,会发现其中做了很多 isNative()的判断,因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑,对性能的良苦用心。