Vue 数组对象修改时被替换

最近在用vue写todolist案例，写登录注册页面时，当把用户名密码和id存入本地数组中时，只能存入一个，再注册个新的用户时，旧用户就会被替换，一开始我的代码是这样写的

    data() {
        return {
            name:'',
            password:'',
            userArr:[] || JSON.parse(localStorage.getItem("userArr")) 
        }
    },
    。。。。。。
    var user={
            name:this.name,
            password:this.password,
            userid:nanoid()
     }
            this.userArr.push(user); 
            //把填写的信息赋值给数组，再把数组保存到本地
            localStorage.setItem('userArr',JSON.stringify(this.userArr))

猛一看好像没什么问题，但问题就出现在细节上，只要改为下面这一句就可以了

userArr:JSON.parse(localStorage.getItem("userArr")) || []

没错，细节就在逻辑运算符 || ，如果按照第一种错误的写法，它会先判断是不是空字符串，如果为true，就不执行下个判断了，也就获取不到userArr数组，所以新添加用户时就会替换掉原有数组里的内容，所以当用到逻辑运算符的时候，前后顺序还是很重要的~