如何解決組件內數據的問題？

Question

在獨立Vue.js腳本我可以混合功能和Vue的data：

var vm = new Vue ({ 
(...) 
    data: { 
    number: 0 
    } 
(...) 
}) 

function return100() { 
    return 100 
} 

vm.number = return100() 

我因此具有Vue的實例（vm），其data經由vm.<a data variable>直接尋址）

如何這樣的尋址組件中的工作，因爲沒有明確實例化Vue的實例？

// the component file 
<template> 
(...) 
</template> 

<script> 

function return100() { 
    return 100 
} 

export default { 
    data: function() { 
    return { 
     number: 0 
    } 
    } 
} 

// here I would like to set number in data to what return100() 
// will return 
??? = return100() 

</script> 

Answer 1

您可以使用這樣的代碼來實現目標。

<template> 
    <div>{{ name }}</div> 
</template> 

<script> 
const vm = { 
    data() { 
    return { 
     name: 'hello' 
    }; 
    } 
}; 

// here you can modify the vm object 
(function() { 
    vm.data = function() { 
    return { 
     name: 'world' 
    }; 
    } 
})(); 

export { vm as default }; 
</script> 

但我真的不建議你以這種方式修改數據，我認爲它可以被視爲Vuejs中的反模式。
在我遇到的幾乎所有用例中，都可以通過使用Vue的lifecycle來完成。例如，我更喜歡用下面顯示的樣式編寫代碼。

<template> 
    <div>{{ name }}</div> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     name: 'hello' 
    }; 
    }, 
    mounted() { 
    // name will be changed when this instance mounted into HTML element 
    const vm = this; 
    (function() { 
     vm.name = 'world'; 
    })(); 
    } 
}; 
</script>