Vue.js 在挂载和重新启动功能中运行代码
回答 3
浏览 17.9万
2017-07-10
我正在用VueJS创建一个游戏，当页面加载时，我想让一个方法启动，对外部API进行ajax调用，并创建一堆数据属性。当玩家赢得这一轮时，我希望他们能够看到一个按钮，让他们重新开始游戏。我正在使用一个mounted()钩子来在页面加载时启动该方法。
我的问题是，如果游戏设置和API调用都在mounted()函数内，我不确定如何实现重启功能。是否有办法再次运行mounted()函数？
3 个回答
#1楼
已采纳
得票数 114
把你的初始化抽象成一个方法，然后从mounted和其他任何你想调用的地方调用这个方法。
new Vue({
methods:{
init(){
//call API
//Setup game
}
},
mounted(){
this.init()
}
})
然后可以在你的模板中设置一个按钮，让你重新开始。
<button v-if="playerWon" @click="init">Play Again</button>
在这个按钮中，playerWon代表你的数据中的一个布尔值，当玩家赢得游戏时，你会将其设置为布尔值，从而出现这个按钮。你将在init中把它设回为false。
事实上，似乎每个人都建议使用
created钩子而不是mounted来初始化一个组件。特别是在获取数据的时候。
- Alexis.Rolland 2019-02-05
@Alexis.Rolland 我认为启动异步代码可能在创建与安装中更好。你选择使用哪种方式通常取决于你是否需要访问渲染的元素。在这个特定的案例中，我认为OP只是想要一个策略来重复使用从mounted或created中调用的代码。
- Bert 2019-02-06
单一的责任原则。
- CodeConnoisseur 2020-08-25
看起来顺序很重要。在方法之后安装的块可以工作，在方法之前则不可以。
- Arthur 2020-11-03
#2楼
得票数 4
有了Vue 3和composition API，你可以使用onMounted钩子来调用一个可以在以后调用的函数。
import {ref, onMounted, watch} from 'vue'
export default {
setup() {
const win=ref(false)
watch(win,(newVal) => {
if(newVal) {
init()
}
})
onMounted(()=>{
init()
})
function init(){
//init
}
}
}
#3楼
得票数 1
您还可以将 mounted 移出 Vue 实例并使其成为顶级范围内的函数。这也是 Vue 中的服务器端渲染 的一个有用技巧.
function init() {
// Use `this` normally
}
new Vue({
methods:{
init
},
mounted(){
init.call(this)
}
})