2020-08-29 template的作用 create和mouted，computed 在mounted中不能能获取this.$refs 路由懒加载的方式

1. template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上

2. create生命周期是在mouted前面的，但是create周期里可以直接获取到computed计算属性的值的！

在网易云项目里：

created() {
    this._getMVContent(this.mvID);//可以直接获取computed计算属性的值
  },


computed: {
    mvID() {
      return this.$route.query.id;
    },
  },

3. Vue中在mounted中不能能获取this.$refs

在mounted(){}钩子里面使用this.$refs.xxx，打印出来的却是undefined？

DOM结构已经渲染出来了，但是如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for（即根据获得的后台数据来动态操作DOM，即响应式），那么这些DOM是不会再mounted阶段找到的。

所以如果在mounted钩子中使用$refs，如果ref是定位在有v-if、v-for、v-show中的DOM节点，这些判断下的DOM还没渲染，返回来的只能是undefined，因为在mounted阶段他们根本不存在！

如果说mounted阶段是加载阶段，那么updated阶段则是完成了数据更新到DOM的阶段(对加载回来的数据进行处理)，此时，ref、数据等等全部都挂载到DOM结构上去，在update阶段使用this.$refs.xxx，就100%能找到该DOM节点。

updated与mounted不同的是，在每一次的DOM结构更新，vue都会调用一次updated(){}钩子函数！而mounted仅仅渲染完成时只执行一次而已。

简单来说，只要在调试的时候，能看到元素的存在，在updated生命周期里可以使用this.$refs.xxx找到对应的DOM节点！

4. Vue中在mounted中能获取this.$refs但是获取不到属性的一种情况

解决问题

我的问题其实在组件的导入方式，因为我采用的是以下方法导入

let Scroll = () => import("components/common/scroll/Scroll.vue");

种导入组件的方式是ES6的路由懒加载的方式，使用这种方式可以将多个模块js组合分割打包，而且组件不会在页面加载的时候就全部加载，所以我在mounted函数中获取不到scroll组件，想要解决的话采用原始的路由加载方式就可以啦

import Scroll from 'components/common/scroll/Scroll.vue'

原始的加载组件方式，页面初始化全部加载，这样就可以在mounted中获取组件scroll了

总结在mounted中使用this.refs

1. 引用ref="XX"的组件不能采用懒加载的形式引入
2. this.refs只能获取在该组件的标签和组件（不能使用v-for、v-if、v-show等vue指令），不能获取组件内部的标签（即要填充插槽里的标签）