欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue 钩子函数

程序员文章站 2022-06-27 14:31:36
Vue 钩子函数 Vue.component('Test', { props: { name: String }, template: `
{{ name }}
`, beforeCreate() { console.log('Test beforeCre ......

vue 钩子函数

 

vue.component('test', {
  props: {
    name: string
  },
  template: `<div class="test">{{ name }}</div>`,
  beforecreate() {
    console.log('test beforecreate');
  },
  created() {
    console.log('test created');
  },
  mounted() {
    console.log('test mounted');
  },
  beforedestroy() {
    console.log('test beforedestroy');
  },
  destroyed() {
    console.log('test destroyed');
  },
  beforeupdate() {
    console.log('test beforeupdate');
  },
  updated() {
    console.log('test updated');
  }
});

vue.component('test1', {
  props: {
    name: string
  },
  template: '<div class="test1"><slot />{{ name }}</div>',
  beforecreate() {
    console.log('test1 beforecreate');
  },
  created() {
    console.log('test1 created');
  },
  mounted() {
    console.log('test1 mounted');
  },
  beforedestroy() {
    console.log('test1 beforedestroy');
  },
  destroyed() {
    console.log('test1 destroyed');
  },
  beforeupdate() {
    console.log('test1 beforeupdate');
  },
  updated() {
    console.log('test1 updated');
  }
});