updated 함수는
Called after a data change causes the virtual DOM to be re-rendered and patched.
라고 설명이 되어있듯이 데이터 변화로 인한 re-randering 발생 후 실행된다.
🤔 그래서
props가 변화하고 re-randering이 끝나면 updated함수가 실행되어야 한다고 생각했는데 실행이 안되어서 공식문서를 찾아보게 되었다.
Note that updated does not guarantee that all child components have also been re-rendered. If you want to wait until the entire view has been re-rendered, you can use vm.$nextTick inside of updated:
updated 함수는 모든 자식 컴포넌트가 re-randering 되고나서 실행되는 것을 보장하지 않는다고 한다. 아마 비동기로 실행되기 때문일건데 이 때 $nextTick을 사용한 후 실행해주면 모든 컴포넌트가 re-randering되고나서 실행될 로직을 적어줄 수 있다.
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}