当页面重新加载时正在监视的属性未更改时，Vue watch 不会运行

Posted 2023-02-22

【中文标题】当页面重新加载时正在监视的属性未更改时，Vue watch 不会运行

【英文标题】：Vue watch does not run when the property being watched is not changed on page reload

【发布时间】：2021-02-07 05:04:21

【问题描述】：

<template>
<!-- The navbar has a property for gender, the color of the navbar will change depending on the 
 gender -->
<!-- pass the props gender through a form submission and event -->

<div class="nav-main" :class="female: isGirl, male: isBoy">
  <nav class="menu">
      <a href="#">Home</a>
      <a href="#">Find</a>
      <a href="#">Match</a>
  </nav>
  <nav class="settings">
      <a href="#" class="setting-link">Settings</a>
  </nav>
</div>
</template>

<script>

export default 
 name: 'Navbar',
 props: ['gender'],
 data()
    return
        isBoy: false,
        isGirl: false,
    
 ,
 watch: 
    gender: function()
        if(this.gender === 'male')
            this.isGirl = false
            this.isBoy = true
            return 0
        else
            this.isBoy = false
            this.isGirl = true
            return 0
        
    

 
 

 </script>

 <style scoped>
 .nav-main
    padding: 20px 0;   
    display: grid;  
    
  
 nav
    display: inline-block;
 
 .menu
    grid-column: 1/4;
    text-align: right;
 
 .settings
    grid-column: 4/6;
    text-align: right;
 
 a
    color: white;
    text-decoration: none;
    padding: 0  50px;
    font-family: 'Nunito', sans-serif;
 
 .female
    background: #ffb6c1;

.male
    background: #4169e1;

</style>

我打算做的是，如果在属性“性别”中传递的值是男性，那么将在导航栏上应用男性类，但如果有其他任何东西，则将应用女性类 这工作得很好，每当我更改属性时，事情都会按计划进行，但是每当我重新加载页面时，监视功能都不会触发并且值保持不变 为什么会发生这种情况，我该如何解决。

比如说，如果我将道具作为男性传递，则应用男性类，如果我将道具更改为女性，则应用女性更改，但现在如果我重新加载页面，则什么也不会发生

【参考方案1】：

在您的情况下推荐的模式是计算属性，将 isBoy isGirl 更改为基于 gender 属性的计算属性：

props: ['gender'],

computed: 
    isBoy() 
         return this.gender==='male'
    ,

    isGirl() 
        return !this.isBoy
    

代码更短，计算出来的属性对 props 的变化有反应。

【讨论】：

哇！有时看着这样的解决方案的人让我觉得我是一个多么好的程序员

我认为是因为您缺少添加immediate:true 属性

【参考方案2】：

computed 的使用方式很好。而你的watch 函数不起作用的原因可能是在你的手表代码开始工作之前prop:gender 已经改变了。 所以试试watch的选项immediate: true。