FCAT

Appearance

created钩子函数 ​

created是Vue组件生命周期中的一个阶段，在组件实例被创建之后被调用。在created阶段，Vue实例已经完成了数据的观察（data observer）和事件的初始化（event initialization），但尚未挂载到DOM中。

主要特点和使用场景：

  1. 在created钩子函数中，可以执行一些初始化的操作，如数据的获取、事件的订阅或非DOM相关的计算等。
  2. 由于DOM尚未挂载，因此在created阶段无法访问到组件的DOM元素和其它组件实例。
  3. created常用于执行异步操作，如通过Ajax请求获取数据，并在数据到达后更新组件的状态。
js
export default {
  components: {
    
  },
  data () {
    return {

    }
  },
  created() {
  // 执行一些初始化操作
  this.fetchData()
  },
  methods: {
    fetchData() {
      // 异步获取数据
      axios.get('/api/data')
        .then(response => {
          // 更新组件状态
          this.data = response.data
        })
        .catch(error => {
          console.error(error)
        });
    }
  }
}
export default {
  components: {
    
  },
  data () {
    return {

    }
  },
  created() {
  // 执行一些初始化操作
  this.fetchData()
  },
  methods: {
    fetchData() {
      // 异步获取数据
      axios.get('/api/data')
        .then(response => {
          // 更新组件状态
          this.data = response.data
        })
        .catch(error => {
          console.error(error)
        });
    }
  }
}

mounted钩子函数 ​

mounted是Vue组件生命周期中的另一个阶段，在组件被挂载到DOM后被调用。在mounted阶段，Vue实例已经完成了模板的编译和DOM的渲染，并且可以访问到组件的DOM元素。

主要特点和使用场景：

  1. 在mounted钩子函数中，可以执行与DOM相关的操作，如DOM元素的获取、事件的绑定、第三方库的初始化等。
  2. 可以访问到组件的DOM元素和其它组件实例，可以对DOM进行操作，如添加样式、绑定事件等。
  3. mounted常用于需要在组件挂载后进行DOM操作的情况。
js
export default {
  components: {
    
  },
  data () {
    return {

    }
  },
  mounted() {
    // 获取DOM元素
    const element = this.$refs.myElement
    // 添加事件监听
    element.addEventListener('click', this.handleClick)
  },
  methods: {
    handleClick(event) {
      // 处理点击事件
      console.log('Clicked!', event)
    }
  }
}
export default {
  components: {
    
  },
  data () {
    return {

    }
  },
  mounted() {
    // 获取DOM元素
    const element = this.$refs.myElement
    // 添加事件监听
    element.addEventListener('click', this.handleClick)
  },
  methods: {
    handleClick(event) {
      // 处理点击事件
      console.log('Clicked!', event)
    }
  }
}