更新的生命周期事件:仅在特定元素的 dom 更新后使用观察者进行操作 [英] updated lifecycle event: act using watcher after dom update on specific element only
问题描述
在 Vue 中有 'updated' 生命周期方法，它适合在数据输入后对我的标记进行处理.在我的情况下，我手动轻推 SVG 文本以对齐某些内容因输入新文本而尺寸发生变化后.
In Vue there's the 'updated' lifecycle method, which is appropriate for doing things to my markup after the data is in. In my case, I'm manually nudging SVG text to align to something after its dimensions change due to new text being input.
好吧，似乎我想使用watch"块，因为它允许我只在更改特定属性后运行我的对齐功能，但是什么我真正需要的是使用 'updated' 事件，因为它与 DOM 而不是数据有关 - 但是如何才能在 just<上隔离和运行我的对齐功能/em> 被编辑并导致updated"触发的元素?
Well, it seems like I want to use the 'watch' block because it allows me to only run my alignment function after a specific property is changed, but what I really need is to use the 'updated' event as it's got to do with the DOM and not the data - but how could it be possible to isolate and run my aligning function on just the one element that was edited and caused the 'updated' to fire?
我不想让多个调整函数触发那些甚至没有被用户数据输入更新的对象.
I'd rather not cause multiple adjustment functions to fire off on objects which were not even updated by the user data entry.
推荐答案
手表属性与数据有关，而更新与标记有关..所以最终发生的是，我的对齐功能是输入的关键".它在呈现标记之前运行对齐.因此，当它对齐时，它会使用先前的渲染来完成此操作.因此，我需要挂钩与标记有关的事件.
The watch properties are concerned with data and update is concerned with the markup.. so what ends up happening is, my alignment function is a 'key behind' the input. It runs the alignment, before the markup is rendered. So when it aligns, it does this using previous rendering. Therefore, I need to hook into the event which is concerned with the markup.
使用 Vue.nextTick(() => {/* 你正在执行的代码 */}):
参数:
{Function} [回调]{Object} [上下文]
用法:
推迟在下一个 DOM 更新周期后执行的回调.更改一些数据后立即使用它以等待 DOM更新.
Defer the callback to be executed after the next DOM update cycle. Use it immediately after you've changed some data to wait for the DOM update.
// modify data
vm.msg = 'Hello'
// DOM not updated yet
Vue.nextTick(function () {
// DOM updated
})
// usage as a promise (2.1.0+, see note below)
Vue.nextTick()
.then(function () {
// DOM updated
})
所以代替:
new Vue({
el: '#app',
// ...
watch: {
someProperty() {
someUpdateCode();
}
}
})
做:
new Vue({
el: '#app',
// ...
watch: {
someProperty() {
Vue.nextTick(() => { someUpdateCode(); });
}
}
})
评论:新的 javascript 语法是全球通用的吗?
是的，这些是箭头函数.它非常标准的 JavaScript 语法.它来自 ES6 (ECMAScript 2017) 版本.
Comments: Is the new javascript syntax world-wide?
Yes, those are arrow functions. Its pretty standard JavaScript syntax. It comes from ES6 (ECMAScript 2017) version.
基本上代码 Vue.nextTick(() => { someUpdateCode(); }); 与: Vue.nextTick(function () { someUpdateCode();}.bind(this));
粗略地说，(abc) =>{ code } 与 function(abc) { code }.bind(this) 相同..bind(this) 部分很重要，但经常被忽视.箭头函数保留原始上下文的 this，而 function(){}s 有其特定的 this(由调用该函数的人修改 -通过functionName.call()或functionName.apply())，.bind()就是保留原上下文的this 在 function 内.
Roughly speaking, (abc) => { code } is the same as function(abc) { code }.bind(this). The .bind(this) part is important and frequently overlooked. Arrow functions retain the original context's this, whereas function(){}s have their specific this (which is modified by whoever calls that function - via functionName.call() or functionName.apply()), the .bind() is to retain the original context's this inside the function.
这篇关于更新的生命周期事件:仅在特定元素的 dom 更新后使用观察者进行操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
