0

我正在尝试在模板安装后运行一个函数，无论是计算的还是观察或观察效果。watcheffect 只执行一次，在安装之前计算当然会运行。我已经尝试flush: 'post'过手表效果和手表冲洗，我很卡住。查看文档，它应该可以按预期工作： https ://v3.vuejs.org/guide/composition-api-template-refs.html#watching-template-refs

因此，使用模板引用的观察者应该使用 flush: 'post' 选项来定义。这将在 DOM 更新后运行效果，并确保模板 ref 与 DOM 保持同步并引用正确的元素。

应用程序.vue

<template>
  <div ref="target">
    <h1>my title</h1>
    <p>Tenetur libero aliquam at distinctio.</p>
    <h1>hello</h1>
    <p class="fuckyeah yolo">quia nam voluptatem illum ratione ipsum.</p>
    <img src="img.jpg" />
    " title="hello" alt />
    <h2>hello</h2>
    <ol>
      <li>hello inital</li>
      <li v-for="i in inc">hello</li>
    </ol>
  </div>
  <div>
    <button @click="inc++">inc</button>
  </div>
  <pre>
  <code>
    {{ toJson }}
  </code>
</pre>
</template>

<script>
import { ref } from '@vue/reactivity'
import { templateRef } from '@vueuse/core'
import { useParser } from './markcomposable.js'
import { onMounted, computed, watchEffect } from '@vue/runtime-core';

export default {
  setup() {

    const inc = ref(0);

    const target = ref(null);


    const { toJson } = useParser(target);


    return {
      inc, target, toJson
    }
  }
}
</script>

//composable.js

import { parse, validate } from "fast-xml-parser"
import { ref, reactive, watchEffect, toRef, nextTick } from 'vue'

const useParser = (target) => {


    const toJson = ref(null);


    const jsonOptions = reactive({
        //defaults
        attributeNamePrefix: "",
        ignoreAttributes: false,
        textNodeName: "text",
        arrayMode: true
    })

    const dumpJson = (target, options) =>
        validate(target.outerHTML) ? parse(target.outerHTML, options) : isValid.value;


    watchEffect(() => {
        if (target.value) {
            toJson.value = dumpJson(target.value, jsonOptions)
            console.log(toJson.value)
        }
    }, {
        flush: 'post',
    })

    return {
        target,
        toJson,
    }

}

export { useParser }
4

2 回答 2

1

如果我理解正确，您正在尝试观察outerHTML模板引用的 ，并且您希望在插入节点时（通过按钮回调）调用模板引用观察程序，但它只被调用一次。

发生这种情况是因为观察者实际上只观察模板 ref 而不是它的属性。只有在使用组件/元素引用初始化模板引用时才会调用观察程序。无法重新分配模板引用，因此不会再次调用观察者。此外，模板 ref 的属性不是响应式的，因此如果目标节点的 HTML 更改，则不会调用观察程序。

解决方案

代替观察者，使用 aMutationObserver来观察对目标节点所做的更改，包括outerHTML.

  1. 创建一个使用 aMutationObserver调用回调的函数：

    const observeMutations = (targetNode, callback) => {
  const config = { attributes: true, childList: true, subtree: true }
  const observer = new MutationObserver(callback)
  observer.observe(targetNode, config)
  return observer
}

  2. 在一个onMounted钩子中，使用该函数来观察模板 ref in target.value，并传递一个回调设置toJson.value：

    let observer = null

onMounted(() => {
  toJson.value = dumpJson(target.value.outerHTML, jsonOptions)

  observer = observeMutations(target.value, () => {
    toJson.value = dumpJson(target.value.outerHTML, jsonOptions)
  })
})

  3. 在一个onUnmounted钩子中，断开观察者作为清理：

    onUnmounted(() => observer?.disconnect())

演示

于 2021-07-29T22:36:22.783 回答
0

只是为了澄清一下：您正在尝试将模板 ref 传递给您的函数，但是当您执行逻辑时它总是显示为 null，对吗？

你可以简单地onMounted(() => {})在你的 composable.js 文件中使用一个钩子，或者你可以实现templateRef（你已经尝试从它的外观中包含它）和until（https://vueuse.org/shared/until/#usage）。

因此，const target = ref(null)您无需const target = templateRef('target', null)将其传递给您的 composable.js。

在那里你会看到，直到裁判是真实的。所以在你的实际逻辑之前，你会这样做：

await until(unrefElement(target)).toBeTruthy() 之后 ref 应该提供一个实际元素（用于unrefElement获取 templateRef 的元素），您可以开始将实际逻辑应用于它。

于 2021-07-29T21:31:22.830 回答