vue中的mounted方法

vue中的mounted方法
Vue中的mounted方法是Vue对象实例挂载到DOM元素之后被调用的一个生命周期钩子，它是在实例被挂载到DOM元素之后立即执行的函数。

Vue在其生命周期中提供了多个钩子函数，其中mounted
是最重要的一个，它可以在组件的DOM节点渲染完毕后被调用。

由于mounted函数在DOM节点渲染完毕后才被调用，它可以帮助我们做一些DOM操作，比如添加js插件，定义按钮的click事件等。

为什么使用mounted函数
使用mounted函数可以帮助我们更加高效的开发、维护Vue应用。

因为它在DOM节点渲染完毕后才被调用，我们就可以在mounted函数里获取到所有的DOM节点对象，从而对它们进行操作，而不用担心DOM操作早于渲染导致操作失败。

mounted中操作DOM元素实例
在mounted函数里，我们可以定义一些DOM元素实例，比如在一个游戏王组件里，我们可以定义一个游戏王图片的实例：
mounted(){
//建King-of-Game的一个实例
this.kingOfGame = new Image();
// 为实例设置src属性
this.kingOfGame.src = ./kingOfGame.jpg
//加到DOM树中
document.body.appendChild(this.kingOfGame);
在上面的代码片段中，我们通过mounted函数创建了一个游戏王图片的实例，并且将其加入到DOM树中去。

使用mounted获取子组件实例
当我们在一个父组件中使用mounted函数获取子组件的实例时，可以使用this.$children来获取子组件的实例：
mounted(){
//取子组件实例
let childComponent = this.$children[0];
//用子组件的方法
childComponent.doSomething();
}
使用mounted来监听数据变化
在mounted函数里，我们可以使用Vue.util.defineReactive来监听数据的变化，当数据发生变化时，就会触发监听函数。

它可以帮助我们精确地监控数据变化，从而进行特定的操作。

mounted(){
//听message变量
Vue.util.defineReactive(this, message {
get(){
//行一些操作
return this.message
set(value){
//行一些操作
...
}
});
}
结论
Vue中的mounted方法是Vue对象实例挂载到DOM元素之后被调用的一个生命周期钩子，它可以帮助我们做一些DOM操作、获取子组件实例，以及监听数据变化，从而实现更加高效的编程开发。