【VUE前进之路】使用数据代理，计算属性与监视属性的妙用

<template>
  <div>
    <h1>学生信息</h1>
    <p>姓名: {{ studentName }}</p>
    <p>年龄: {{ studentAge }}</p>
    <p>班级: {{ studentClass }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      studentInfo: {
        name: '张三',
        age: 18,
        class: '软件工程1班'
      }
    }
  },
  computed: {
    studentName() {
      return this.studentInfo.name;
    },
    studentAge() {
      return this.studentInfo.age;
    },
    studentClass() {
      return this.studentInfo.class;
    }
  },
  watch: {
    'studentInfo.name': function(newVal, oldVal) {
      console.log(`姓名由"${oldVal}"更改为"${newVal}"`);
    }
  }
}
</script>

这段代码使用了Vue的计算属性和观察属性来展示学生信息。计算属性studentName、studentAge和studentClass直接返回studentInfo对象的相应属性值，简化了模板中的表达式。观察属性studentInfo.name则用于监控studentInfo对象中name属性的变化，并执行相应的回调函数。这样的实践可以使得模板与数据间的依赖关系更加清晰，同时也使得代码更易于维护和理解。