Vue进入页面时函数调用

NALHZ • 2025-04-22 01:14 • 编程

一、什么是Vue进入页面时函数调用

Vue进入页面时函数调用是指在Vue实例初始化时自动调用的函数，这些函数可用于初始化数据、执行异步请求、添加监听器和其他一些编程任务。它们在Vue实例创建后执行，可用于处理数据和调用其他生成的组件、指令或过滤器。

一些常见的Vue进入页面时函数调用包括created、mounted、beforeCreate和beforeMount。接下来将针对这些函数进行详细讲解。

二、created函数

created函数是在Vue实例创建之后立即调用的函数，在这个函数内可以进行数据初始化，并可以执行一些初始数据获取、异步请求等操作。created函数是可以使用this关键字引用Vue实例的，所以可以通过该函数进行Vue实例的初始化。

created () {
  this.message = 'Hello World!'
}

在以上代码中，我们使用created函数将message属性初始化为’Hello World!’。

三、mounted函数

mounted函数是在Vue实例完成挂载后调用的函数。在mounted函数内，可以对DOM进行操作，如添加监听器、初始化值、设置样式等。mounted函数也可以用于异步请求、计算属性的初始化以及其他一些非同步任务。与created函数一样，挂载完成后使用this关键字可以引用Vue实例。

mounted () {
  this.$nextTick(function () {
    // DOM更新后回调
  })
}

在以上代码中，我们使用mounted函数，监听DOM更新后的回调操作。

四、beforeCreate函数

beforeCreate函数是在Vue实例被创建后立即调用的函数，在这个函数内，可以进行一些Vue实例的属性和方法的初始化，但是此时Vue实例还没有初始化完毕，所以在beforeCreate函数中不能访问data、computed、methods和watch等实例属性。通常在这个函数上可以进行一些全局方法或插件的初始化等操作。

beforeCreate () {
  Vue.prototype.$http = axios
}

在以上代码中，我们将Axios库设置为Vue实例的全局变量。

五、beforeMount函数

beforeMount函数是在Vue实例挂载到DOM之前调用的函数。在这个函数内，可以进行一些初始化的操作，并可以对即将渲染的DOM进行修改。与beforeCreate函数一样，此时实例还没有渲染DOM，因此beforeMount函数中不能进行直接访问 DOM 元素的操作。

beforeMount () {
  this.$refs.div.innerText = 'New text'
}

在以上代码中，我们使用beforeMount函数，修改ref为’div’的DOM元素的inner text为’New text’。

六、总结

Vue进入页面时函数调用是Vue实例初始化时自动调用的函数，常用的有created、mounted、beforeCreate和beforeMount函数。created函数用于初始化数据，mounted函数用于监听DOM更新后操作，beforeCreate函数用于进行全局方法或插件的初始化，beforeMount函数用于对即将渲染的DOM进行修改。这些函数都是在Vue实例初始化时自动调用的，开发者需要根据实际需求选择使用。

原创文章，作者：NALHZ，如若转载，请注明出处：https://www.506064.com/n/370727.html