props和data的优先级

951 阅读1分钟

(作者笔记自用)

    <body>
        <div id="app">
            <my_component :msg="msg"></my_component>
        </div>
    </body>
    <script>
        // props加载在data之前,不会覆盖,会报错误出来
        var my_component = Vue.extend({
            name: my_component,
            template: '<div>{{msg}}</div>',
            data() {
                return {
                    msg: 'data数据',
                };
            },
            props: ['msg'],
        });
        Vue.component('my_component', my_component);
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    msg: 'props数据',
                };
            },
        });
    </script>

结果:

1.png

Vue源码:执行加载顺序Props->Methods->Data->Computed->Watch