watch 和 methods 执行顺序-Toy模板网

这篇具有很好参考价值的文章主要介绍了watch 和 methods 执行顺序。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题：在平台选择改变的时候获取服务类目，但服务类目中接口入参一直为空

思路：感觉明明在watch已经给platform 赋值过却依然我没值
所以只有一种可能就是，methods中方法的执行顺序早于 watch

解决办法：就是在平台选择改变时，给接口入参赋值，添加了【代码1】这一行

知识点：
1）watch在页面初始化的时候不会执行
2）触发methods的执行顺序： methods -》 watch -》computed

参考链接：https://www.jianshu.com/p/f412bff6da82文章来源地址https://www.toymoban.com/news/detail-669467.html

<template>
  <Form ref="popupFormRef" :model="popupForm" :rules="popupFormRules" :label-width="120">
    <FormItem label="平台" prop="popSelectedPlatform">
      <Select v-model="popupForm.popSelectedPlatform" placeholder="请选择平台" :disabled="condition" @on-change="platformChange">
        <Option v-for="item in platformList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </FormItem>
  </Form>
</template>

<script>
export default {
  data(){
    return {
      popupForm: {
        popSelectedPlatform: "全部",
        platform: "",
      },
      platformList: [
        {
          label:"全部",
          value:"全部"
        },
        {
          label:"E服务小程序",
          value:"2"
        },
        {
          label:"E服务公众号",
          value:"3"
        },
      ],
    }
  },
  watch:{
    "popupForm.popSelectedPlatform" : function(newValue,oldValue){
      console.log("newValue:" + newValue,"oldValue:" + oldValue)
      this.popupForm.platform = newValue == "全部"? '' : newValue
      console.log("this.popupForm.platform:" + this.popupForm.platform)
    }
  },
  methods:{
    platformChange(val){
      console.log(val)
      if(val != "全部"){
        this.popupForm.platform = val  // 代码1
        this.getCategoryList()
      }
    },
    // 根据平台查询服务类目接口
    getCategoryList(){
      console.log(this.popupForm.platform,283)
      getCategory({ platform: this.popupForm.platform }).then(res => {
        console.log(res)
        if(res.ret == '00000'){
          this.serviceCategoryList = res.data
        }
      })
    },
  }
}
</script>

<style></style>

到了这里，关于watch 和 methods 执行顺序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！