如何在Vue3中观察div内部的变化

Question

如何在Vue 3中观察div内部的任何更改，如类或文本更改。

来自

<p class="font-bold">My text</p>

至：

<p class="font-bold color-red">My updated text.</p>

我已经尝试了Vue 3 Watch方法，但Watch方法并没有在div中寻找更改。

watch(myDiv, (newValue, oldValue) => {
// not working for changes inside a myDiv. 
})

Answer 1

您可以使用您的段落创建SFC组件，并使用Updated 上的挂钩捕获每一个更改

onUpdated(() => {
console.log('updated');
});

示例：https://stackblitz.com/edit/vue-5qtyjg

Answer 2

要查看一些属性，您需要首先绑定它，比如<p :class="classes">{{ text }}</p>，也可以使用mutationObserver：

const {ref, onMounted, onBeforeUnmount} = Vue
const app = Vue.createApp({
data() {
return {
text: 'My text',
classes: 'font-bold'
};
},
watch: {
text(newValue, oldValue)  {
console.log(newValue)
},
classes(newValue, oldValue)  {
console.log(newValue)
}
},
methods: {
addClass() {
this.classes = 'font-bold color-red'
}
},
setup() {
let observer = null
let target = ref(null)
let options = {subtree: true, childList: true, attributes: true}
const callback = (mutationList, observer) => {
for (const mutation of mutationList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
} else if (mutation.type === 'attributes') {
console.log(`The ${mutation.attributeName} attribute was modified.`);
}
}
};
onMounted(() => {
target = document.querySelector(".mydiv")
observer = new MutationObserver(callback);
observer.observe(target, options);
});
onBeforeUnmount(() => observer.disconnect())
},
})
app.mount('#demo')

.color-red {
color: red;
}
.font-bold {
font-weight: 700;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<p class="mydiv" :class="classes">{{ text }}</p>
<input v-model="text" />
<button @click="addClass">class</button>
</div>

Answer 3

在Vue3中，您可以在模板中使用ref。文档

<p ref="myDiv" class="test">{{text}}</p>

现在您可以在模板中定义它们。myDiv.value将保存DOM元素

const myDiv = ref(null)
const text= computed(() => {
if(myDiv.value.classList ... rest of your logic for checking classes)
return "Text"
else return "Updated Text"
})