vue.js中哪种情况改变数据不会被监听

Posted 2023-04-30

参考技术A 最早看vue官网文档的时候都有提到过，但是随着自己使用被把这种重要的点给忽略了，以至于偶尔会遇到这种问题，并且在解决过程中走了很多弯路。

首先看官网的文档

1.对于对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

解决方法是使用this.$set(this.someObject,'b',2)；给对象添加新属性；

这种情况我再项目上经常遇到的是对象的某个属性如isShow绑定到v-if之类的条件判断中，因为如果对象上没有值，v-if条件判断是转换为false的，这样容易忽略定义，还有ajax请求返回的数据中没有这个属性，但条件判断需要，经常是用到之后再添加，这样就容易出现问题。

对于根节点，即需要定义在data上的属性，如要后续要用到，最好提前在data上定义好默认值或空值，不要用到之后再用this.someName = 'xx'这样的；

2.对象数组

Vue 不能检测以下数组的变动：

1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

2.当你修改数组的长度时，例如：vm.items.length = newLength

对于改变数组的值也可以用this.$set(this.someArr, 1, 'newVal');另外改变数组本身的一些操作数组的方法都可以被监听到push（结尾添加）、unshift（开头添加）、pop（结尾删除）、shift（开头删除）、splice（指定位置删除添加）、sort（排序）、reverse（倒叙）。因为这些方法在vue源码中都被重新改写，调用这些方法都会被监测到，从而引发更新

自己之前一直对此比较模糊的原因：

因为有时候明明错误的操作了，却会引起更新，有时可以，有时却不可以；最终多次实验发现，如果在一个同步队列中又其他可以争取引起更新的操作，其他不正确的操作也可以被监听到；

比如：this.name = 'newName' //name在data已经定义； this.arr1[0] = 'xxx'；这种也会引起更新。

在 React Native 中，这两种方法中哪种 Async Await 方法更好，为啥？

【中文标题】在 React Native 中，这两种方法中哪种 Async Await 方法更好，为啥？

【英文标题】：In ReactNative, which Async Await method is better in these two and why?在 React Native 中，这两种方法中哪种 Async Await 方法更好，为什么？

【发布时间】：2018-05-24 18:24:47

【问题描述】：

verifyUser等待verifyUserSignInSuccess等待userSnapshot等待user

这里在这两个函数中，对于ReactNative app在正确性、内存、时间方面会更有效：

export function verifyUser() 
  return async dispatch => 
    dispatch(verifyUserSignInRequest());
    try 
      const user = await firebase.auth().onAuthStateChanged();

        if (user) 
          let userRef = "/user/" + user.uid;
          const userSnapshot = await firebase
            .database()
            .ref(userRef)
            .once("value");
          dispatch(verifyUserSignInSuccess(userSnapshot.val()));
         else 
          dispatch(verifyUserSignInFailure(USER_NOT_SIGNED_IN));
        
     catch (e) 
      dispatch(verifyUserSignInFailure(e.message));
    
  ;

或者嵌套的异步等待：

export function verifyUser() 
  return async dispatch => 
    dispatch(verifyUserSignInRequest());
    try 
      await firebase.auth().onAuthStateChanged(async user => 
        if (user) 
          let userRef = "/user/" + user.uid;
          await firebase
            .database()
            .ref(userRef)
            .once("value")
            .then( () => 
              dispatch(verifyUserSignInSuccess(userSnapshot.val()));
            );
         else 
          dispatch(verifyUserSignInFailure(USER_NOT_SIGNED_IN));
        
      );
     catch (e) 
      dispatch(verifyUserSignInFailure(e.message));
    
  ;

【问题讨论】：

我认为第一个选项更好，因为更容易阅读。我不会使用 async/await，而是使用 Promise。第二个是 async/await 承诺的混合，这使得它有点难以阅读。我的意见是，我会用链式 Promise 让它干净又漂亮:)

第一个更具可读性，比if (user) / else 块突出。

【参考方案1】：

根据documentation，onAuthStateChanged()函数返回

观察者的取消订阅功能。

所以你可以：

var unsubscribe = firebase.auth().onAuthStateChanged((user) 
    // handle it for changes signed in, signed out, or when the user's ID token changed in situations such as token expiry or password change 
);

然后：

unsubscribe(); 用于注册观察者。

onAuthStateChanged 是一个观察者，它在用户登录、退出或在令牌过期或密码更改等情况下用户的 ID 令牌发生变化时调用观察者。所以第二个是最好的解决方案。每次登录或更改。

` let userRef = "/user/" + user.uid;
          await firebase
            .database()
            .ref(userRef)
            .once("value")
            .then( () => 
              dispatch(verifyUserSignInSuccess(userSnapshot.val()));
            );
         else 
          dispatch(verifyUserSignInFailure(USER_NOT_SIGNED_IN));
        ` 

正确的交叉检查是用户是否有效。我不认为需要进行内存比较。

【参考方案2】：

时间 - 因为您的所有异步函数都需要一个接一个地运行，无论您使用 async/await 或 Promise 链接或两者混合使用的任何方法都只需要相同的时间。

正确性 - 两者在逻辑上都是正确的，并且工作方式相同。但是 async/await 是 JS 中用于解决 Promise 链接问题的最新补充。 Promise 链接使代码难以阅读。最好坚持 async/await。对于需要并行运行两个异步函数的情况，请使用 await Promise.all() 等。最后，这是您的个人喜好。

内存？ - 我不知道

在 github 上免费阅读这本书，其中包含有关 Promise、异步函数、异步/等待等的详细信息。 https://github.com/getify/You-Dont-Know-JS