vue.jsのmountedとは？

公式: mounted
https://jp.vuejs.org/v2/api/index.html#mounted
elがマウントされた丁度後に呼ばれる
-> ビュー全体がレンダリングされた後にのみ実行される
-> createdはDOMがまだ作られていない状態、mountedはDOMが生成された直後の状態

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
    <script>
        new Vue({
            el: '#chat',
            data: {
                message: '',
                messages: []
            },
            methods: {
            },
            mounted(){
                this.$nextTrick(function(){
                     
                })
            }
        });
    </script>

### createdとmounted

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new Vue({
            el: '#app',
            data: {
            },
            methods: {
                showEl : function(){
                    console.log(this.$el)
                }
            },
            created(){
                    console.log('created')
                    console.log(this.$el)
            },
            mounted(){
                    console.log('created')
                    console.log(this.$el)
            }
        });

createdを実装するイメージが湧かないが、mountedの使い方はわかりました。