当前位置 主页 > 服务器问题 > win服务器问题汇总 >

    浅谈Vue.set实际上是什么

    栏目:win服务器问题汇总 时间:2019-10-20 15:40

    谈到Vue.set就要说响应式原理,所以得为你自己准备下这方面的理论知识。然而,一如即往,这并不难或者枯燥。准备点鳄梨和薯条,制作些鳄梨酱,然后我们再进入话题。

    数据和响应式原理

    在一个Vue组件中,无论你何时创建一个data()功能属性,都会返回一个对象。Vue在组件背后做了很多事情,来使得它具有响应式。

    export default {
     data() {
      return {
       red: 'hot',
       chili: 'peppers'
      }
     }
    }
    

    Vue要做的第一件事是使用我们超帅的RHCP(Red Hot Chili Peppers, 一个超赞的乐队)data,它遍历了return {}对象的属性properties,然后为它们创建了唯一的getter和setter。具体情况已经超出了本文的范围,但是Vue Mastery有个很赞的视频去解析这点。

    创建这些属性的目的是使你在代码中访问这些属性时(例如通过执行this.red或使用this.red=hotter进行设置时),实际上是在调用Vue为你创建的getter和setter。

    在SETGET这块神奇的土地上,Vue连接起了computer properties, watchers, props,data等,从而变得响应式。以非常简单的方式,它被称为一个函数,该函数在每次setter改变时更新整个工作。

    陷阱

    酷极了!这就是我们喜欢Vue的原因,它具有响应式和强大的幕后功能。但是也有一些阴暗面需要我们探讨。

    在我们开始之前,我们更改下data数据看发生什么。

    data() {
      return {
        members: {}
      }
    }
    

    好吧,到目前为止没什么看头,我们在data中有一个member属性,用来添加乐队成员的信息。现在,为了举例,我们添加一个方法,并假装从远程http请求中拉取一些信息,它将返回一个乐队信息的JSON对象。

    data() {
     return {
      members: {}
     }
    },
    methods: {
     getMembers() {
      const newMember = {
       name: 'Flea',
       instrument: 'Bass',
       baeLevel: 'A++'
      }; // Some magical method that gives us data got us this sweet info
    
      // ...
     }
    }
    
    

    嗯。好吧,我们先停停然后思考下这个例子。如何将newMember对象添加到当前的member属性中?这有许多方法可以解决当前的难题。

    也许你会想,我们可以将member转换成一个数组,然后将它push进去。这可行,但是这是在作弊,因为它破坏了我开始输入时细心构造的例子。

    在这种情况下,我们member是一个object。好吧,简单,你会说,我们在member上添加一新的属性,这样它还是一个object。实际上,我们在member上添加个name属性。

    getMembers() {
      const newMember = {
       name: 'Flea',
       instrument: 'Bass',
       baeLevel: 'A++' // Totally important property that we will never use
      }; // Some magical method that gives us data got us this sweet info
    
      this.members[newMember.name] = newMember;
     }
    
    

    Lok'tar Ogar!(不胜则亡)

    可是,不,因为-

    A. 这不是Orgrimmar(魔兽世界人物)
    B. 现在我们遇到问题了

    如果你在浏览器上测试这段代码,你将看到你确实将新数据推入member数据中了,但是此次的更改组件的状态将不会使得你的应用重新渲染。

    仅将这些数据用于某些计算或某种内部存储的情况下,以这种方式进行操作不会影响你的应用程序。然而,这里应该是大大的转折HOWERVER,如果你在自己app上正在使用这种数据去展示数据,或者根据条件v-if或v-else来渲染,事情将变得有趣。

    实际使用Vue.set