更新的生命周期事件：仅在特定元素上dom更新后使用观察者进行操作

Question

在Vue中，有一种' updated'生命周期方法，该方法适用于在输入数据后对标记进行处理。就我而言，由于输入了新文本，我手动对SVG文本进行了大小写更改，以手动使其与某些文本对齐。

好吧，似乎我想使用' watch'块，因为它允许我仅在更改特定属性后才运行对齐功能，但是我真正需要的是使用' updated'事件，因为它与DOM有关而不是数据-但是怎么可能只对一个被编辑并导致' updated'触发的元素隔离并运行我的对齐功能？

我宁愿不要在用户数据条目甚至都没有更新的对象上触发多个调整功能。

Answer 1

watch属性与数据有关，而update与标记有关。因此最终发生的是，我的对齐功能是输入的“关键”。在呈现标记之前，它将运行对齐。因此，当对齐时，它将使用以前的渲染进行此操作。因此，我需要了解与标记有关的事件。

用途Vue.nextTick(() => { /* code you were executing */ })：

文件：

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

• 参数：

  • {Function} [callback]
  • {Object} [context]

• 用法：

  推迟在下一个DOM更新周期之后执行的回调。更改一些数据以等待DOM更新后，请立即使用它。

  // 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）版本。

基本上，代码Vue.nextTick(() => { someUpdateCode(); });与以下代码相同：Vue.nextTick(function () { someUpdateCode(); }.bind(this));

大致来说，(abc) => { code }与相同function(abc) { code }.bind(this)。该.bind(this)部分很重要，经常被忽略。箭头功能保留了原有的语境的this，而function(){}■找其特定的this（这是由谁调用该函数修改-通过functionName.call()或functionName.apply()）时，.bind()是保留了原有上下文的this内部function。