vue.js mounted是干什么的 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Vue.js中的mounted是一个生命周期钩子函数，用于在Vue实例挂载到DOM元素上之后调用。

具体来说，当新建一个Vue实例后，Vue会首先解析模板，然后将实例所需的数据和方法注入到模板中，最后将模板渲染到真实的DOM元素中。mounted钩子函数就是在这个过程中的最后一个阶段触发的。

在mounted钩子函数中，可以进行一些需要操作DOM或初始化数据的操作。例如，可以通过操作DOM元素来初始化一些插件、库或第三方组件，也可以发送AJAX请求来获取数据并更新实例中的数据。

需要注意的是，在mounted钩子函数被调用时，Vue实例已经完成了初始化，并且DOM已经完全渲染完成。这意味着可以通过操作DOM元素来获取到正确的尺寸、位置等信息。

总结起来，mounted钩子函数的作用就是在Vue实例挂载到DOM完成之后执行一些初始化操作，是一个很好的时机来操作DOM元素和进行数据的初始化。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue.js 中的 mounted 是一个生命周期钩子函数，指的是在 Vue 实例挂载到 DOM 元素上之后会被调用的函数。

具体来说，当 Vue 实例被创建并且完成了数据绑定之后，会调用 mounted 钩子函数。在这个时候，Vue 实例已经挂载到了 DOM 元素上，可以通过 DOM API 进行操作。

mounted 生命周期钩子函数主要用于进行一些需要 DOM 元素的操作，比如获取 DOM 元素的引用、初始化插件、订阅事件等等。

下面是 mounted 生命周期钩子函数的一些常见应用场景：

初始化插件：在 mounted 钩子函数中，可以对一些基于 DOM 的插件进行初始化。比如使用轮播图插件、下拉刷新插件等等。
发送 AJAX 请求：在 mounted 钩子函数中，可以发送异步请求获取数据，并将数据绑定到 Vue 实例的 data 属性上。这样，组件渲染到 DOM 上时，已经有了数据可以显示。
订阅事件：在 mounted 钩子函数中，可以订阅一些需要监听的事件。比如监听窗口大小变化事件、监听滚动事件等等。
操作 DOM 元素：在 mounted 钩子函数中，可以通过 document.getElementById() 等 DOM API 获取 DOM 元素的引用，并进行一些操作。比如给元素添加样式、修改元素内容等等。
调用第三方库：在 mounted 钩子函数中，可以调用一些第三方库进行一些特定的操作。比如使用 jQuery 或者 D3.js 等库操作 DOM 元素。

总之，mounted 生命周期钩子函数在 Vue 实例挂载到 DOM 元素上之后执行，它提供了一个操作 DOM 的时机，并且可以进行一些初始化、数据获取、事件订阅等操作，方便开发者进行进一步的操作。

2年前 0条评论

worktile

Worktile官方账号

Vue.js中的mounted是一个生命周期钩子函数，它会在Vue实例挂载到DOM元素上后调用。在mounted钩子函数中，我们可以执行一些需要在组件挂载后立即执行的操作，例如初始化数据、获取远程数据、订阅事件等。

通常，我们使用mounted钩子函数执行以下操作：

初始化数据：在mounted钩子中，我们可以通过访问this来初始化组件的data属性中的数据。可以通过Ajax请求或其他方式从远程服务器获取数据，并将它们保存在data属性中，以便在组件中使用。
绑定事件或订阅事件：如果我们需要绑定DOM事件或订阅全局事件，可以在mounted钩子中进行。例如，我们可以使用Vue的事件机制来监听按钮的点击事件，或者使用第三方库的方法来订阅全局事件。
执行DOM操作：mounted钩子函数是在Vue实例挂载到DOM后调用的，因此在这个时候，我们可以通过操作DOM元素来完成一些需要直接访问DOM的任务。可以使用原生JavaScript或jQuery等库来操作DOM元素，例如修改元素的样式、添加、删除或修改DOM节点等。
初始化插件或第三方库：如果我们需要在Vue实例挂载后初始化一些插件或第三方库，可以在mounted钩子函数中进行。例如，我们可以在mounted中初始化地图插件、轮播图插件或日期选择器插件等。

需要注意的是，mounted钩子函数只会在Vue实例挂载完成后执行一次，因此如果需要在组件更新后执行某些操作，应该使用updated钩子函数。

示例代码如下：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  mounted() {
    // 初始化数据或执行其他操作
    this.getData();
    this.subscribeEvents();
    this.initPlugin();
  },
  methods: {
    getData() {
      // 从远程服务器获取数据，并存储在组件的data属性中
    },
    subscribeEvents() {
      // 订阅事件或绑定DOM事件
      this.$on('event', this.handleEvent);
      document.addEventListener('click', this.handleClick);
    },
    initPlugin() {
      // 初始化插件或第三方库
      // 例如初始化地图插件、轮播图插件等
    },
    changeMessage() {
      this.message = 'New Message';
    },
    handleEvent() {
      // 处理事件
    },
    handleClick() {
      // 处理点击事件
    }
  }
};
</script>

在上面的示例中，mounted钩子函数被用来在组件挂载后执行一些初始操作。在mounted中，我们从远程服务器获取数据，订阅了名为'event'的Vue事件，并在组件上监听了点击事件。同时，还可以根据需求执行其他相关操作。

2年前 0条评论