时间戳

首页 > 解决方案 > 组件 DOM 更改时的 Vue 通知

javascript - 组件 DOM 更改时的 Vue 通知

问题描述

对组件的 DOM 没有影响的 prop 更改会updated意外触发其功能。

https://jsfiddle.net/e5gyuorL/1/

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

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

在数据更改后调用会导致重新渲染和修补虚拟 DOM。

如何捕获实际的 DOM 重新渲染？如果这是一个常见问题解答，请道歉；我看了看长度。

标签： javascriptvue.js

解决方案

我能想到的最直接的方法是让组件将其存储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>

推荐阅读