Vue生命周期八大钩子函数

    科技2022-08-10  115

    方法名含义beforeCreate在数据初始化的之前被调用,这时候data和methods还没有数据。created在数据初始化之后被调用,这时候data和methods有了相应的数据。beforeMount页面尚未被渲染时使用,就是Vue的数据还没有传到页面。mounted页面渲染完成之后使用,也就是此时页面已完全取出Vue中的数据。beforeUpdatedata数据更新前。updateddata数据更新。beforeDestroy组件销毁之前。destroyed组件摧毁之后。

    demo.vue代码

    <template> <div id="app"> {{msg}} <button @click="dochange()">Change Content</button> </div> </template> <script> export default { data(){ return { msg:"hello" } },mounted(){ console.log("this is my demo ...."); },beforeCreate(){ console.log("before created"); },created(){ console.log("created"); },beforeMount(){ console.log("before mount"); },mounted(){ console.log("mounted"); },beforeUpdate(){//当数据发生改变得时候 console.log("before update"); },updated(){//当数据发生改变得时候 console.log("updated"); },beforeDestroy(){ console.log("before destroy"); },destroyed(){ console.log("destroyed"); },methods:{ dochange(){ this.msg="world"; console.log("change..."); } } } </script>

    Processed: 0.022, SQL: 8