mounted和created的区别

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/oncemore520/article/details/82988646

mounted一般是在html渲染完成后的操作，此时el，data都已经加载完成，一般对dom的操作都写在mounted中，例如获取innerHTML，初始化echarts的时候。
created一般是在html渲染前的操作，此时el还是undefined，data已经存在。这里不能对dom进行操作

项目中遇到的问题

我要在这里加载echarts图，而这个echarts图中的数据是异步请求过来的，
我在methods中定义一个initdata的方法，方法中异步请求过来，

    let item_html = response.data.user_level.loan_estimation  ? response.data.user_level.loan_estimation.context.extra_info.display_html .replace(/\"/g, "'") : ''
          if(item_html !== ''){
            this.$nextTick(() =>{
           document.getElementById("rate").innerHTML =
            '<iframe  " style="width:100%;" scrolling="0" onload="this.height = this.contentWindow.document.body.scrollHeight+200" srcdoc="' +
          item_html  +
            '"></iframe>';
        
           })
          }

假如不加nextTick，在mouted中调用的话，由于此时由于异步调用，item——html并没有数据，所以又不能再mounted中调用，而加在created中的时候又会报错，不能用同步请求，axios也没有同步请求，所以这种情况也不行。
这时就用到强大的nextTick

nextTick
vue实现响应式并不是数据变化之后DOM立即变化，而是通过一定策略进行DOM的更新操作
$nextTick是在下次DOM更新之后执行延迟回调，在修改数据之后使用nextTick则可以操作更新后的DOM

这是一种使用场景

另外一种使用场景就是，假如有一个jQuery插件，希望在DOM元素中某些属性发生改变之后重新应用该插件，这时候就需要在$nextTick的回调函数中重新应用该插件