Skip to content

Computed Properties (computed) and Watchers (watch)

Designers can process data in scripts according to Vue's Computed Properties and Watchers usage.

Example Script

js
{
    props: {
        firstName: {
            type: String
        }
    },
    data: function () {
        return {
            lastName:'Zhang San',
            fullname:null,
        }
    },
    watch:{ 
        lastName:function(){ 
            this.fullname = this.firstName +'.' + this.lastName; 
        }, 
        descs:{ 
            handler: function(){ 
                this.fullname = this.firstName +'.' + this.lastName; 
            }, 
            immediate: true
        }, 
    } 
    computed:{ 
        compFullName(){ 
            return this.firstName +'.' + this.lastName; 
        }, 
    }, 
    created: function () {
        console.log('script.created');
    },
    mounted: function () {
        console.log('script.mounted');
        var that = this;
        setTimeout(function () {
            that.setup();
        }, 0);
    },
    beforeDestroy: function () {

    },
    methods: {
        setup: function () {
            var that = this;
            console.log('script.setup');
            that.setFormDesc(this.descs);
        },
        setFormDesc: function(val) {
            var that = this;
            console.log('script.setFormDesc');
            that.form.descs = 'props:' + (val == null ? '' : val);
        }
    }
}