vue中created和mounted的区别浅析

Vue中created和mounted的区别浅析

1. 概述

created和mounted两个生命周期函数是Vue中常用的两个函数，二者在Vue的生命周期中都扮演着重要的角色，但二者却存在着不同的特征。本篇文章将围绕Vue中created和mounted的区别进行分析，帮助Vue初学者更好的理解它们的作用。

2. created

created函数是Vue的一个生命周期钩子函数，在实例化Vue实例之后，该函数会在实例创建完成后立即被调用。在created函数中，我们可以进行一些Vue实例的初始化工作，例如：对实例中的数据、方法进行初始化赋值。

以下是一个示例：

new Vue({
  data: {
    message: 'Hello Vue.js!'
  },
  created: function () {
    console.log('message is: ' + this.message)
  }
})

在以上示例中，我们定义了一条数据message，并在created函数中输出了message的内容。通过打开控制台，我们可以看到控制台输出了"message is: Hello Vue.js!"的信息。

3. mounted

mounted函数也是Vue的一个生命周期钩子函数，在Vue实例完成挂载之后，该函数会在数据渲染时间结束后被调用。在mounted函数中，我们可以进行一些跟DOM元素进行交互、操作的任务。

以下是一个示例：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  mounted: function () {
    var el = document.getElementsByTagName('h1')[0]
    console.log('DOM content is: ' + el.innerHTML)
  }
})

在以上示例中，我们在Vue实例中定义了一个id为"app"的元素，并在mounted函数中获取其中第一个<h1>标签，并输出其内部内容。待数据渲染完毕后再打开控制台，可以看到输出了"DOM content is: Hello Vue.js!"的信息。

4. 区别与应用场景

created和mounted在执行的时间点上存在区别，created在实例创建完毕后立即调用，而mounted需要等到数据渲染完毕后才会被调用。这也就决定了二者之间的应用场景有所不同。

以下是根据二者的区别所能做的一些事情：

在created中可以进行数据初始化、第三方插件会操作数据、监听事件等操作；
在mounted中可以访问组件DOM元素、执行jQuery（需要在mounted之后引入jQuery）等操作。

既然二者存在的应用场景不同，那么我们就要根据需要合理使用。比如，如果我们需要进行异步请求数据，加载组件，就需要在created中处理；而如果我们需要通过JS修改DOM元素，由于可能涉及到元素渲染，所以这时候就需要在mounted中进行操作。

5. 示例

为了更好地对上面提到的这些应用场景进行理解和掌握，下面提供几个具体的案例供参考。

5.1 示例一：数据初始化赋值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Created and Mounted Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>Message is: {{ message }}</p>
  </div>
  <script>
    new Vue({
      el: '#app',
      created: function () {
        this.message = 'Hello Vue'
      }
    })
  </script>
</body>
</html>

如上所示，我们在Vue实例中，通过created函数，对数据进行初始化并将message的值置为"Hello Vue"。

5.2 示例二：jQuery操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Created and Mounted Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div id="app">
    <p v-text="message"></p>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      mounted: function () {
        $('#app').css('background-color', 'yellow')
      }
    })
  </script>
</body>
</html>

如上所示，我们在Vue实例中，通过mounted函数，引入了jQuery，并对应用的背景颜色进行了修改。

6. 总结

created和mounted是Vue生命周期中两个常用的钩子函数，它们在执行的时间点上存在区别，在实际应用中要根据需要进行使用。在created中我们可以进行数据初始化、第三方插件会操作数据、监听事件等操作；在mounted中我们可以访问组件DOM元素、执行jQuery等操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue中created和mounted的区别浅析 - Python技术站