Question

从lifecycle diagram我无法确定何时评估data。

请参阅下面的示例代码：

<template>
  ...
</template>

<script>

  function generateUniqUserRef () {
    return Math.random() + new Date().valueOf()
  }

  export default {
    data() {
      return {
        user_ref: generateUniqUserRef()
      }
    }
  }
</script>

应该只计算一次user_ref或者在重新渲染时再重新计算一次吗？

我正准备尝试一下。我只是希望得到一个正式的解释，可能会有参考。

Answer 1

beforeCreate() - 在vue实例初始化之后调用 new Vue({})。这里没有观察到数据，即vue实例不知道在数据选项中初始化了什么。
created() - 在创建vue实例后调用。这里vue insance知道数据选项中的反应属性是什么，你可以设置（更改）数据选项中的任何属性

user_ref只能计算一次，还是应该在重新渲染时重新评估？

不会只计算一次。当数据发生变化并导致重新渲染虚拟dom时会发生重新渲染，因此只有dom上依赖的操作才会再次发生。

但是你最好计算user_ref中的created()，因为它只会被调用一次。

<script>

  export default {
    data() {
      return {
        user_ref: null
      }
    },
    created(){
        this.user_ref = Math.random() + new Date().valueOf();
    }
  }
</script>

您可以在您的机器上运行此代码，检查控制台日志

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
    alert("hi i just ran"); // will only run once , not on every re-render

    export default {
          name: 'hello',
          data () {
            return {
                  msg: 'initial message'
            };
          },
          beforeCreate(){
              console.log('from before create', this.msg); // undefined
              console.log('from before create', this.msg === 'initial message'); // false
          },
          created(){
              console.log('from created', this.msg); // 'initial message'
              console.log('from created', this.msg === 'initial message'); //true
          },
          mounted(){
              // changes the msg 
              setTimeout(()=>{
                  this.msg = 'initial message changed';
              }, 1000); // causes dom to re-render
          },
          beforeUpdate(){
              console.log('from before update', this.msg) // 'initial message changed'
              setTimeout(()=>{
                  this.msg = 'initial message changed again from before update';
              }, 1000); 
          },
          updated(){
              console.log('from updated', this.msg)
          }
     }
</script>

<style scoped>

</style>

来源：options/lifecyclehooks

何时评估“数据”？

1 个答案: