Vue.js 更新的生命周期事件：仅在特定元素上进行dom更新后使用watcher进行操作

在Vue中，有一种“

updated

”生命周期方法，适用于在数据导入后对我的标记执行操作。在我的例子中，由于输入了新文本，SVG文本的尺寸发生了变化，我正在手动推送SVG文本，以使其对齐

看起来我想使用“

watch

”块，因为它只允许我在特定属性更改后运行对齐功能，但我真正需要的是使用'

updated

'事件，因为它与DOM有关，而不是与数据有关-但是，如何能够仅在一个被编辑并导致'

updated

触发的元素上隔离并运行我的对齐函数呢

我不希望让多个调整功能在用户数据输入未更新的对象上启动

监视属性与数据有关，更新与标记有关。。因此，最终发生的是，我的对齐函数是输入后面的一个“键”。它在呈现标记之前运行对齐。因此，当它对齐时，它会使用先前的渲染来执行此操作。因此，我需要钩住与标记相关的事件

使用

Vue.nextTick（（）=>{/*您正在执行的代码*/}）

：

Vue.nextTick（[回调，上下文]）

• 参数：

  • {Function}[回调]

  • {Object}[context]

• 用法：
  将回调延迟到下一个DOM更新周期之后执行。 在更改某些数据以等待DOM后立即使用它 更新

  //修改数据
  vm.msg='Hello'
  //DOM尚未更新
  Vue.nextTick（函数（）{
  //DOM更新
  })
  //作为承诺使用（2.1.0+，见下文注释）
  Vue.nextTick（）
  .然后（函数（）{
  //DOM更新
  })
  

因此，不是：

newvue({
el:“#应用程序”，
// ...
观察：{
someProperty（）{
someUpdateCode（）；
}
}
})

做：

newvue({
el:“#应用程序”，
// ...
观察：{
someProperty（）{
nextTick（（）=>{someUpdateCode（）；}）；
}
}
})

---

注释：新的javascript语法是全球通用的吗？ 是的，那些是。它非常标准的JavaScript语法。它来自ES6（ECMAScript 2017）版本

基本上是代码

Vue.nextTick（（）=>{someUpdateCode（）；}）与：
Vue.nextTick（函数（）{someUpdateCode（）；}.bind（this））

大致来说，
（abc）=>{code}
与
函数（abc）{code}.bind（this）
相同。
.bind（此）
部分很重要，经常被忽略。箭头函数保留原始上下文的
this
，而
function（）{}
s有其特定的
this
（由调用该函数的人修改-通过
functionName.call（）
或
functionName.apply（）
），
.bind（）
是将原始上下文的
此
保留在
函数中
通过Vue的更新方法执行。
为了基于某些特定属性更改运行特定函数，您可以引入一个帮助变量，告诉您特定属性是否已更改

怎么可能只在一个被编辑并导致“更新”触发的元素上隔离并运行我的对齐功能

创建一个布尔属性并将其绑定到您的元素，这样当一个元素被更改时，布尔属性将被设置为True，并且在“Updated”方法中，只需在该布尔属性上使用if条件，当它为True时，执行对齐函数并将该布尔属性重置为false。
是否有理由不查看保存文本输入的值，然后运行对齐函数？事实上，我是这方面的初学者。但我的理由是Vue的行为：（它在文档中也有说明），watch属性与数据有关，update与标记有关。。因此，最终发生的是，我的对齐函数是输入后面的一个“键”。它在呈现标记之前运行对齐。因此，当它对齐时，它会使用先前的渲染来执行此操作。因此，我需要钩住与标记相关的事件。基本上，我可以粘贴所有类型的文本，但它不会对齐，因为watch看到的是数据，而不是DOM。我可以使用超时，但我觉得这不合适，会导致各种问题。新的javascript语法是全球通用的吗？您可以展开“Vue.nextTick（（）=>{someUpdateCode（）；}）”吗要我理解恐龙脚本吗？：）好极了，好极了，先生，它起作用了！很好的回答，对我不断增长的知识做出了贡献！我无法夸大我对它的工作效率的纯粹喜悦，我可以复制/粘贴、撤销，它的即时响应。*我所做的很多开发（虽然不是这个）都是针对AdobeExtendScript的，在那里我们使用ES3语法（O_O）-所以ES6对我来说还是一段旅程！“更新”的问题是，它会在我需要它之前进行对齐。我想通过nextTick函数也可以避免同样的情况。我对那个特殊的练习已经太多了，但这是我的代码笔，它使用了公认答案的技巧：是的，你是对的。在您的特定用例中，nextTick很好使用。在代码笔示例Mounted方法中，可以通过nextTick执行v.adjustAllText（），而不是在setTimeout中执行，为了安全起见，可以调用尽可能多的递归nextTick（当数据绑定到未知大小的数组时，我通常会这样做），比如Vue.nextTick（函数（）{Vue.nextTick（函数（）{v.adjustAllText（）；}）；}）；