VueJS2: Должен ли я писать функции в data ()?

Question

Является ли написание функций в data хорошей практикой?Я имею в виду не в корневом компоненте, а скорее в его дочерних компонентах.

Я спрашивал об этом, потому что я видел один из плагинов Vue vue-echarts , который использует его в своем README.md

<template>
<v-chart :options="polar"/>
</template>

<style>
/**
 * The default size is 600px×400px, for responsive charts
 * you may need to set percentage values as follows (also
 * don't forget to provide a size for the container).
 */
.echarts {
  width: 100%;
  height: 100%;
}
</style>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    let data = []

    for (let i = 0; i <= 360; i++) {
        let t = i / 180 * Math.PI
        let r = Math.sin(2 * t) * Math.cos(2 * t)
        data.push([r, i])
    }

    return {
      polar: {
        title: {
          text: '极坐标双数值轴'
        },
        legend: {
          data: ['line']
        },
        polar: {
          center: ['50%', '54%']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      }
    }
  }
}
</script>

Если да, то когда он будет выполнен?После created() жизненного цикла или как?

Итак, это два вопроса

1. Это считается наилучшей практикой?
2. Если так, когда он будет выполнен?

Спасибо.

Answer 1

Клавиатура данных - это память компонента. Это позволит вам хранить переменные, которые вы хотите отслеживать, внутри компонента, это часть реактивности вашего компонента.

Если да, то когда он будет выполнен?

Он будет выполнен после beforeCreate метода и до created.

ср: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Вы можете отформатировать данные непосредственно внутри вашей функции данных, если вы хотите иметь что-то конкретное.

Пример, который вы привели из плагина vue-echart, совпадает с

let data = []

for (let i = 0; i <= 360; i++) {
    let t = i / 180 * Math.PI
    let r = Math.sin(2 * t) * Math.cos(2 * t)
    data.push([r, i])
}

var vm = new Vue({
  data() {
    return {
      a: data
    }
  }
})

Лично я предпочитаю форматировать свои данные в функции created() после создания состояния по умолчанию для моего компонента, просто для упрощения кода.

Имейте в виду, что ключевое слово data также может быть простым объектом, но оно должно быть функцией внутри компонентов, чтобы они не разделяли один и тот же объект, когда они дублируются в одном и том же экземпляре Vue.

Для этого случая не существует "наилучшей практики" (я могу ошибаться, но я ничего не видел в этом), это просто предпочтение, которое может отличаться у двух разработчиков

Не стесняйтесь проверять https://vuejs.org/v2/api/#data, если вы хотите больше информации об этом data