vue如何不绑定事件就让函数执行

Question

如下vue组件：

<template>
    <div class="parent">
       <canvas ref="canvas2" ></canvas>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        methods: {
            writeFont(){
                var canvas = this.$refs.canvas2;
                var ctx = canvas.getContext('2d');
                 ctx.font = '24px Arial';
                ctx.fillStyle = '#333333';
                ctx.fillText('带阴影的文字', 20, 20);
            }
        }
    }
</script>

如何让writeFont方法在组件加载时执行，而不是将其绑定到某个标签上。

Answer 1

可以再vue的组件生命周期中的created 里执行

    export default {
        created(){
            this.writeFont()
        }
        methods: {
            writeFont(){
                var canvas = this.$refs.canvas2;
                var ctx = canvas.getContext('2d');
                 ctx.font = '24px Arial';
                ctx.fillStyle = '#333333';
                ctx.fillText('带阴影的文字', 20, 20);
            }
        }
    }

详见官方文档https://cn.vuejs.org/v2/guide...

Answer 2

在created或者mounted钩子里面执行

created() {
    this.writeFont()
}

Answer 3

了解一下vue的生命周期，综上所述，楼上说的都对，除了楼主~