dhpk-vue-2-notes

Vue 2 — Options API baseline

Targets vue ^2.5.17. Options API only — the Composition API (setup(), ref, reactive, <script setup>) does not exist here; it arrives in 2.7 as a backport and is the default in Vue 3.

SFCs (.vue) are compiled by vue-loader driven by Laravel Mix (webpack 4). Source lives under resources/assets/js. See the laravel family skill's mix selector for the build wiring.

---

Signature features

Options API component structure

export default {
    name: 'OrderTicket',

    props: {
        order: { type: Object, required: true },
        compact: { type: Boolean, default: false },
    },

    // data MUST be a function returning a fresh object, so each
    // component instance gets its own state (not a shared reference).
    data() {
        return {
            expanded: false,
            note: '',
        };
    },

    computed: {
        // cached, re-evaluated only when a reactive dependency changes
        title() {
            return this.compact ? this.order.no : this.order.fullName;
        },
    },

    methods: {
        toggle() {
            this.expanded = !this.expanded;
        },
    },

    watch: {
        // imperative side effects on a value change
        'order.status'(next, prev) {
            if (next === '6') this.$emit('done', this.order.id);
        },
    },

    created() {
        // instance + reactivity ready; DOM NOT yet mounted
    },

    mounted() {
        // DOM available; safe to read $refs / attach listeners
    },
};

Lifecycle order: beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed. Fetch data in created (no DOM needed); touch the DOM in mounted.

Props down, events up

State flows one direction. A child never mutates a prop; it emits an event and lets the owner of the state change it.

// child
methods: {
    remove() {
        this.$emit('remove', this.item.id); // ask parent to mutate
    },
},