Vue子组件钩子函数 -- 使用钩子函数遇到的问题及解决方法

        想在登录页面的背景上加一个Canvas，生成背景动画效果，于是找到了canvas-nest.js。将canvas-nest放到一个js文件内，取名initCanvas()，用function封装起来，并通过

export {
  initCanvas
}

export出来。
( 题外话：项目使用了ESLint，这段js因为写法问题疯狂报错，需要在js开头加上

/* eslint-disable */

来忽略这些报错 )
在main.js里面

import { initCanvas } from '@/canvas'

import这个function进来，然后通过mounted钩子函数调用

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  mounted: function() {
    initCanvas()
  }
})

页面正常。
但是很快就发现了问题，登录页面有背景画布，登陆成功了到主页面，背景画布还在。
查看这一段js，发现画布是通过

document.createElement("canvas")

添加的，所以是的子节点，跟

同一级别，在主页面里面也是会显示的。
于是我想将这个直接append到appDiv的子节点loginDiv里面，这样就可以实现只有登录页面有背景动画了。
于是我在就是里面尝试查找这个div

console.log(document.getElementById("loginDiv"))

发现输出null，无法查找到，但是可以查找到appDiv。
我将整个document打印出来，发现document里面确实存在loginDiv这个节点啊，可为什么通过getElementById找不到呢？
经过反复测试，发现了问题所在。initCanvas这一段js是通过main.js里面的mounted钩子函数调用的，而这一层只有appDiv这一个节点。而loginDiv是通过components组件的方式引入的，跟main.js不在同一层。
于是我尝试这直接在loginDiv这个组件中通过mounted钩子函数调用initCanvas。

export default {
  name: 'Login',
  mounted() {
    initCanvas()
  }
}

调试发现，canvas成为了loginDiv的子节点，登录到主页面之后不会再出现了。