渲染后的Vue组件事件

Question

Vue中是否有一个事件在元素重新渲染后被触发？我有一个更新的对象，这导致我的模板更新。在它更新之后，我想触发一个运行jQuery函数的事件。代码如下所示:

template: `
    <div class="undo-margin">
        <div class="gradient">
            <img v-bind:src="blogPost.thumbnail"/>
            <h1 class="align-bottom">{{blogPost.title}}</h1>
        </div>

        <div class="container bg-faded">
            <article v-html="blogPost.article"></article>
        </div>
    </div>

`,
props: ["blogid"],
data: function () {
    return blogPageData;
},
mounted: function () {
    const blogid = jQuery("#blogPage").attr("blogid");
    if (this.authdata.roles.indexOf("Administrator") !== -1) {
        this.isAdmin = true;
    }

    this.getBlogPost(blogid);
},
methods: {
    getBlogPost: function (blogid) {
        var element = this;
        $.ajax({
            url: `/api/blog/${blogid}`,
            type: "get",
            headers: headers,
            success: function (data) {
                if (data === undefined) {
                    window.location.replace("/blog");
                } else {
                    element.isDetails = true;
                    element.blogPost = data;
                }
            },
            error: function (data) {
                window.location.replace("/blog");
                errorData.error = data.responseText;
            }
        });
    }
},
watch: {
    blogPost: function () {
        console.log(this.blogPost);
        jQuery("pre").each((i, e) => {
            hljs.highlightBlock(e);
        });
    }
}

如您所见，我尝试使用监视事件，但是当监视事件触发时，我的页面尚未更新。然而，blogPost已更改，但vue仍在呈现页面。我知道理论上我可以通过添加setTimeout来解决这个问题，但我更喜欢更干净的东西。

Answer 1

updated（）应该是您正在寻找的：

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

调用此钩子时，组件的DOM将被更新，因此您可以在此处执行依赖于DOM的操作。

Answer 2

更新的可能是您正在寻找的。

vue 2 https://v2.vuejs.org/v2/api/#updated

编辑：现在Vue3是当前版本，这里是相关生命周期挂钩的链接。

Vue3合成API https://vue js . org/API/Composition-API-life cycle . html # on updated

Vue3选项APIhttps://vuejs.org/api/options-lifecycle.html#updated