案例讲解：使用created和mounted钩子初始化数据和操作DOM元素

假设我们有一个简单的Vue组件，需要在组件创建时初始化数据并在DOM元素挂载后进行一些操作。我们可以使用created和mounted这两个钩子来实现。

// 定义Vue组件
const MyComponent = {
  data() {
    return {
      message: 'Hello Vue!' // 初始化数据可以在created钩子中进行操作，也可以在data函数中直接定义。此处我们在data函数中直接定义数据。
    };
  },
  created() { // created钩子函数在组件创建时调用，此时数据已经初始化完成，但DOM还未挂载。我们可以在这里进行一些数据的预处理操作。 },
  mounted() { // mounted钩子函数在DOM元素挂载后调用，此时可以操作DOM元素或执行一些与DOM相关的逻辑。 },
  template: '<div>{{ message }}</div>' // 这里是组件的模板定义。在实际开发中，可以根据需要添加更多的模板内容。 也可以添加其他逻辑代码等。 } }; // 这里可以添加更多的代码和逻辑。