Wrong
<script>
export default {
name: 'SomeComponent',
data () {
return {
foo: this.hello
},
computed: {
hello () {
return 'hello'
}
}
}
<script>
// foo >> undefined
Good
<script>
export default {
name: 'SomeComponent',
data () {
return {
foo: ''
},
computed: {
hello () {
return 'hello'
}
},
mounted () {
this.item.hello = this.hello
}
}
<script>
// foo >> 'hello'
Во время инициализации компонента первой инициализируется data, после нее все остальное. А поскольку в момент инициализации data computed свойства еще не существуют то из data ми к ним достучатся не сможем. По этому делаем присвоение computed свойства в data делаем в mounted хуке
Не то чтобы совсем правильно.
Во-первых, лучше устанавливать свойства, зависимые от исходной
data
в хукеcreated
, т.к. если это выполнять вmounted
, то это приведет к лишней перерисовке дом-ноды.Во-вторых,
this.item.hello = this.hello
— выплюнет ошибку.