渲染后的Vue组件事件

Posted 2023-02-22

【中文标题】渲染后的Vue组件事件

【英文标题】：Vue component event after render

【发布时间】：2017-11-23 08:45:21

【问题描述】：

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);
        );
    

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

【参考方案1】：

updated 可能就是您要找的。 https://vuejs.org/v2/api/#updated

【讨论】：

谢谢，这确实有效。我还发现你可以在更新 DOM 后使用this.$nextTick(function () ...); 来执行代码。我会把它留在这里，以防有人发现它也有用

请注意，在某些环境中，刷新页面时不会调用updated()：请参阅vuejs.org/v2/api/#updated 处的“在服务器端呈现期间不调用此挂钩”。

【参考方案2】：

updated() 应该是您要查找的内容：

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

当这个钩子被调用时，组件的 DOM 将被更新，所以你可以在这里执行依赖于 DOM 的操作。