您的位置:

Vue进入页面时函数调用

一、什么是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实例初始化时自动调用的,开发者需要根据实际需求选择使用。