网站备案 游戏,易企推,十大下载网站免费安装,wordpress 外贸站1. vue的 nextTick的原理
首先vue实现响应式并不是数据发生变化后dom立即更新#xff0c;而是按照一定的策略 异步执行dom更新的。 vue在修改数据后#xff0c;试图不会立即进行更新#xff0c;而是要等同一事件循环机制内所有数据变化完成之后#xff0c;在统一更新 next…1. vue的 nextTick的原理
首先vue实现响应式并不是数据发生变化后dom立即更新而是按照一定的策略 异步执行dom更新的。 vue在修改数据后试图不会立即进行更新而是要等同一事件循环机制内所有数据变化完成之后在统一更新 nextTick可以让我们在下次dom更新循环结束之后执行延迟回调用于获取更新后的dom 事件循环机制 在浏览器中我们可以将我们的执行任务分为微任务和宏任务 宏任务 整体javascriptsetTimeoutsetIntervalsetLmmediate 微任务promise.then promise.all
具体执行顺序 首先加载js代码然后在执行里面的同步任务在执行的过程中如果遇到了异步任务会把他放到一个任务队列中在任务队列里面会判断是宏任务还是微任务首先会执行宏任务因为弘任务是整体的javascript代码所以第一步会先执行宏任务在执行宏任务的过程中如果遇到微任务同样道理也会把他当到当前的任务队列里面等这个宏任务执行完毕之后再去执行当前的微任务当前微任务执行完毕之后再去执行下一个宏任务。
templatedivdiv{{ count }}/divdiv clickhandleClickclick/div/div
/templatescriptexport default {data() {return {count:0}},methods: {handleClick() {for (let i 0; i 1000; i) {this.count}}},}
/script当点击按钮count会被循环1000次每次count1都会出发count的setter方法然后修改真实的dom按此逻辑真个过程dom会被更新1000次而dom的每次更新是非常消耗性能的而且这样的操作是完全没有必要的所以vue在内部派发更新时做了优化也就是并不是每次数据更新都会去出发回调而是把更新的数据放到一个任务队列里面等待所有的数据都更新完毕之后再去执行回调函数更新最后的dom
vue.nextTick 原理 vue中数据变化到dom变化是一个异步的过程一旦观察到数据发生变化vue就会开启一个任务队列然后把在同一个事件循环中观察的数据变化的Watchervue源码中的watcher类是用来更新dep类收集到的依赖的推送到这个队列中。 如果这个watcher被触发多次他只会被推送到队列一次这种缓存行为可以有效的去掉重复数据造成的不必要的计算和dom操作而到了下一个事件循环时vue会清空队列并进行dom更新。nextTick的作用是为了在数据发生变化之后等待vue完成更新dom可以在数据变化之后立即使用vue。nextTickjs是单线程语言nextTick的实现就是利用了事件循环的宏任务和微任务。
vue.nextTick的应用 1.在create生命周期中操作dom create钩子函数的时候dom其实并没有进行挂载和渲染此时是无法操作dom的我们将操作dom的代码可以方法nextTick只。
templatedivspan reftext12345/span/div
/templatescript
export default {created() {// 会直接报错this.$refs.text.innerHTML 2222222this.$nextTick(() {this.$refs.text.innerHTML 2222222})},
}
/script2.修改数据获取dom的值 当我们修改了data里的数据时并不能立即通过操作dom去获取到里面的值或者说页面的值没有发生变化
templatedivspan reftext{{ a }}/spanspan{{ b }}/spanspan {{ c }}/span/div
/template
script
export default {data() {return {a: 0b:0,c:0,}},methods: {chage() {this.a 12// 你会发现获取的值没有发生改变 this.b this.$refs.text.innerHTMLthis.$emit(check, this.a)//通过加入nextTick后获取的值才会发生改变这是在dom更新之后的值this.$nextTick(() {this.c this.$refs.text.innerHTML})}},
}
/script3.还有一种情况就是在做修改的时候model对话框没有渲染父组件带过的值
// 通过父组件点击修改或者查看如果不用nextTick你会发现从父组件带过来的record参数没有被渲染到model对话框上这个应为visibel为true的时候model还没dom还没有被更新所以setFieldsValue是不生效的必须用nextTick异步更新dom之后在去渲染数据edit(record) {this.form.resetFields();this.model Object.assign({}, record);this.visible true;this.$nextTick(() {this.form.setFieldsValue(pick(this.model,kpilevel,classify,...));});},2.vue修改数据后页面不重新渲染的问题
在对一个对象遍历之后进行属性添加添加成功之后页面不刷新的问题
templatedivspan v-for(value, key) in params :keykey{{ value }}/spana-button typeprimary clickhandleClick iconsearch查询/a-button/div
/templatescript
export default {data() {return {params: {a: 1,b: 2,c: 3,}}},methods: {handleClick() {this.params.d 13// 这里能够打印出来但是页面没有刷新console.log(this.params);}},
}
/script问题分析 应为vue2是用过Object.defineProperty实现数据响应式组件初始化才递归遍历item这时候并没有给item的每个属性添加set和get方法所有后来并没有给newVal设置成响应式数据结果就是修改后不会视图更新。
const item {}
Object.defineProperty(obj, oldProperty, {get() {console.log(get oldProperty:${val});return val},set(newVal) {if (newVal ! val) {console.log(set oldProperty:${newVal});val newVal}}
})
}组件初始化时对data中的item进行递归遍历对item的每一个属性进行劫持添加set,get方法。我们后来新加的newProperty属性并没有通过Object.defineProperty设置成响应式数据修改后不会视图更新。
所以vue不允许再以创建的实例上动态的添加新的属性。但是如果想实现数据和试图同步更新要怎么操作
1.vue.set( )
target: 需要更改的数据源可以是一个对象或者数组
key需要更改的具体数据如果是数组元素更改key表示索引如果是对象key表示键值
value重新赋的值
Vue.set( target, propertyName/index, value )this.$set(this.params, newProperty, 新值);
this.$set(this.params, 13, {key: newkey, name: 888})2. Object.assign( )
this.params Object.assign({},this.params,{newProperty:新值})
3. $forceUpdate( ) 这种迫使vue强制刷新迫使dom重新渲染他会影响本身还有涉及到的子组件以及插槽都会更新一般是不建议使用
this.params.newProperty 新值
this.$forceUpdate();
4. 通过扩展语法 … const aa { ...this.params, d: 13 }this.params aa5.同过在组件添加一个key对key来进行修改 span :keycomponentKey /span v-for(value, key) in params :keykey{{ value }}/spana-button typeprimary clickhandleClick iconsearch查询/a-buttonhandleClick() {this.params.d 13this.componentKey 1}
