Javascript 渲染后的Vue组件事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44659277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue component event after render
提问by user2657943
Is there an event in Vue that gets fired after an element re-renders? I have an object that updates, which causes my template to update. After it updates I want to trigger an event which runs a jQuery function. The code looks like this:
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);
});
}
}
As you see, I tried using the watch event, however when the watch event triggers, my page is not updated yet. blogPost however has been changed, but vue is still rendering the page. I know I could theoretically fix this by adding a setTimeout, but I would prefer something cleaner.
如您所见，我尝试使用 watch 事件，但是当 watch 事件触发时，我的页面尚未更新。然而 blogPost 已被更改，但 vue 仍在渲染页面。我知道理论上我可以通过添加 setTimeout 来解决这个问题，但我更喜欢更简洁的东西。
回答by Stephen
updatedmight be what you're looking for. https://vuejs.org/v2/api/#updated
updated可能就是你要找的。https://vuejs.org/v2/api/#updated
回答by David Hallberg J?nsson
updated()should be what you're looking for:
updated()应该是你要找的：
Called after a data change causes the virtual DOM to be re-rendered and patched.
The component's DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here.
在数据更改导致虚拟 DOM 重新渲染和修补后调用。
调用此钩子时，组件的 DOM 将被更新，因此您可以在此处执行依赖于 DOM 的操作。
