vue组件中的（钩子函数

1.了解vue组件中的钩子函数

1.了解我们的钩子函数

我们在Vue的官方网站的左侧选项中可以找到我们的生命周期钩子的这个选项，点击进去可以看到我们的钩子函数的方法和其类型、用法及详细信息。

Vue链接：组合式 API：生命周期钩子 | Vue.js (vuejs.org)

在这里里面可以清楚的看到我们的关于钩子函数的方法以及用法和效果。

2.钩子函数的常用方法和用法

我们先创建一个组件和一个页面，在我们的页面中创建一个scroll-view组件在其组件内容在使用我们的ref=“name值”，这个名字可以自己取没有要求，你在下面的script里面创建的常量的名字就是使用什么名字。

拓展：我们的const定义的常量是不会改变的，而ref 函数返回的是一个带有 value 属性的对象，而不是直接返回原始值。这个对象被称为 Ref 对象。当通过 Ref 对象的 value 属性来修改值时，Vue 会捕获到这个操作，并触发重新渲染视图。虽然 const 声明的变量不可以直接被修改，但在 Vue 的响应式系统中，通过 ref 创建的 Ref 对象可以实现数据的响应式更新。

创建好了之后我们运行页面如果取到的值为null则表示我们并没有取到我们的节点信息。

这时候我们就需要要使用我们的 onMounted 它的使用方式类似于我们的函数，我们再次在onMounted里面输出我们的值。

如果需要获取到我们的节点信息可以在scroll-view里面设置scroll-x，因为我们已经有了我们的scroll-y="true"，这个时候就可以去我们的页面查看我们的节点信息了。

3.删除生命周期

先在我们的页面中调用我们的组件，在组件里面创建onUnmounted来卸载我们的子组件。

在我们的当前页面里面调用我们的组件。

我们给我们的的组件设置一个v-if在这个里面设置一个常量，默认值为true。在设置一个定时器改为2秒钟之后这个的显示值为false子组件从页面中消失，并在控制台里面输出我们的：子组件已卸载。

以上就是我们的生命周期的简单的来说呢就是创建、挂载、更新、销毁；