评论：全球新的javascript语法是什么？

Question

在Vue中有'updated'生命周期方法，它适用于在数据进入后对我的标记执行操作。在我的情况下，我手动轻推SVG文本以在其尺寸之后对齐某些内容因输入新文本而改变。

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

我宁愿不让多个调整函数触发甚至没有被用户数据条目更新的对象。

Answer 1

手表属性与数据有关，更新与标记有关..所以最终发生的事情是，我的对齐功能是输入的“后面的键”。它在渲染标记之前运行对齐。因此，当它对齐时，它使用先前的渲染来完成此操作。因此，我需要挂钩与标记有关的事件。

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

Docs:

Vue.nextTick（[callback，context]）
<强>参数：


{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语法是什么？

是的，那些是arrow functions。它非常标准的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。

Answer 2

通过Vue的更新方法进行操作。为了基于某些特定的属性更改来运行特定的功能，您可以引入一个帮助变量，该变量告诉您特定属性是否已更改。

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

创建一个布尔属性并将其绑定到您的元素，这样，当元素被更改时，布尔属性将被设置为True，并且在“ Updated”方法中，只需对该布尔使用if条件属性，以便当它为true时，执行对齐功能并将该Boolean属性重置为false。

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

2 个答案:

Vue.nextTick（[callback，context]）

评论：全球新的javascript语法是什么？