vue中mounted和created的使用和区别

mounted和created的区别

created:在模板渲染成html调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。

<template>
  <div>
    <div id="myChart" :style="{width: '350px', height: '350px',float:'left'}"></div>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted(){
      this.drawLine();
    },
    methods: {
      drawLine(){
        // 基于准备好的dom,初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        let myChart1 = this.$echarts.init(document.getElementById('myPie'))
        // 绘制图表
        myChart.setOption({
          title: { text: 'bar charts' },
          tooltip: {},
          legend: {
            data:['销量']
          },//上端的销售标签
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 25, 36, 10, 10, 20]
          }]
        });
      }
    },
  }
</script>

在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素,一定会报错
而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,故输出了结果“唐浩益”。


版权声明:本文为qq_38577700原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。