javascript - vue.js : how to update state with object?

Question

我是 vue.js 的新手，但我以前对 React 有一些经验。

我已经阅读了 vue 指南，并尝试通过 React 的概念来理解 vue。

我假设 vue data 与 React state 类似，因为当它更新应用程序时，它会再次渲染页面。

所以我想做一些类似的事情......(代码在React中)

this.setState(Object.assign({}, this.state, { key1: 'value1', key2 : 'value2'}))

但据我所知，在 vue 中:

this.key1 = 'value1';
this.key2 = 'value2';

这是正确的吗？我猜 vue 会渲染两次，因为它是 2 个语句。如何一次设置多个值？

我已经尝试过了...

// not working
this.$set(Object.assign({}, thisRef.data, { key1: 'value1', key2: 'value2' }))

// not working
this.data = { key1 : 'value1', key2: 'value2' };

在第二个中，数据已更改 - 我已使用 console.log(this) 打印了值 - 但它不会再次呈现。

仅供引用，vue 模板的完整代码在这里。非常欢迎代码审查和更正。

<script>
    export default {
        layout: 'reactQuickly'
        , data: function(){
            return {
                time: null
                , init: null
            }
        }
        , methods: {
            startTimer: function(time){
                clearInterval(this.init);
                let thisRef = this;
                let interval = setInterval(
                    function(){
                    console.log('2: Inside of interval', time)
                    let timeLeft = thisRef.time - 1;
                    if(timeLeft <= 0) clearInterval(interval);
                    thisRef.time = timeLeft;
                    // thisRef.$set(Object.assign({}, thisRef.data, { time: timeLeft }))
                    console.log('thisRef', thisRef, this);}
                , 1000);
                console.log('1: After interval');
                // this.data = { time : time, init: interval };
                this.time = time;
                this.init = interval;
                console.log('this.data', this.data);
                // this.$set(Object.assign({}, this.data, { time : time, init: interval}));
            }
        }
    }
</script>

============版本==========

react this.state 和 vue this.data 不一样，对吧？对我来说，主要的困惑就是从那时开始的。

在vue中

export default {
  data : function() {
    return {
      foo : 'bar'
    }
  }
}

和

react 中

constructor() {
  super()
  this.state = {
    foo : 'bar'
  }
}

是完全不同的概念，对吗？

Answer 1

您对这个问题的担忧是没有必要的。您无需担心在 Vue 中一次设置多个值。

(我从这篇很棒的文章中了解到了我要说的内容 => Updating UIs: value comparison VS mutation tracking 。)

React 和 Vue 在跟踪 UI 何时更新方面有非常不同的方式。

React 使用对象不变性。这就是为什么每次 setState 时，您实际上都是在创建一个全新的对象，并根据新的对象值重新渲染整个组件。

Vue uses getters/setters on the data object for mutation tracking.当你执行this.key1 = 'value1';时，它会经过key1的setter。在 setter 中，有一个函数可以通知观察者并将此数据更改添加到队列中。

In case you haven’t noticed yet, Vue performs DOM updatesasynchronously. Whenever a data change is observed, it will open aqueue and buffer all the data changes that happen in the same eventloop. If the same watcher is triggered multiple times, it will bepushed into the queue only once. This buffered de-duplication isimportant in avoiding unnecessary calculations and DOM manipulations.https://v2.vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

因此，当你执行 this.key1 = 'value1'; this.key2 = 'value2';，它不会渲染两次。Vue 会自动将数据更改排队并稍后将它们一起重新渲染。

我的意思是，你的担心是没有必要的。您无需担心在 Vue 中一次设置多个值。 React 和 Vue 具有非常不同的 react 系统。您可能想阅读上面的链接以更好地理解。

(顺便说一句，Vue 现在使用 getter/setter，但将来它将使用 JS 代理。 https://github.com/vuejs/roadmap )