Question

不影响组件DOM的属性更改会意外触发其updated功能。

与v-html="markup()"或{{markup()}}或computed: { markup: ... }相同的结果。

updated（https://vuejs.org/v2/api/#updated）的文档说：

在数据更改导致虚拟DOM重新呈现和修补后调用。

如何捕获实际的DOM重新呈现？如果这是常见问题解答，则表示歉意。我看着长度。

Answer 1

我能想到的最直接的方法是让组件将其innerHTML存储在一个数据项中，并在每次更新时检查它是否已更改：

Vue.component('t-markdown', {
  template: '#t-markdown',
  data: {
  	innerHTML: ''
  },
  props: {src:String},
  methods: {
    markup: function() { return this.src.slice(0,11) },
  },
  updated: function() { 
  	if (this.innerHTML !== this.$el.innerHTML) {
	  	this.$parent.count++;
      this.innerHTML = this.$el.innerHTML;
    }
   },
   mounted() {
   	this.innerHTML = this.$el.innerHTML;
   }
});

new Vue({
  el: "#app",
  data: {count:0, inp:'<b>src</b> '},
  methods: {
    change: function() { this.inp += '#' },
  },
  mounted() {
  	setTimeout(() => this.inp = '<i>changed!</i>', 7000);
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: sans-serif, Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <t-markdown :src="inp"></t-markdown>
  <button @click="change">change</button> updated: {{count}}
  <div>
    {{inp}}
  </div>
</div>

<script type="text/x-template" id="t-markdown">
  <div v-html="markup()"></div>
</script>

组件DOM更改时的Vue通知

1 个答案: