Vue 计算属性 computed

<!--
    计算属性：
        1. 定义：要用的属性不存在，要通过已有的属性计算得来
        2. 原理：底层借助了 Object.defineProperty 方法提供的 getter 和 setter
        3. get 函数什么时候执行？
            (1). 初次读取时会执行一次
            (2). 当依赖的数据发生改变时会被再次调用
        4. 优势：与 methods 实现相比，内部有缓存机制（复用），效率高，调试方便
        5. 备注：
            1. 计算属性最终会出现在 vm 上，直接读取使用即可
            2. 如果计算属性要被修改，那必须写在 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变
-->
<div id="root">
    <ul>
        <li>姓：<input type="text" v-model="firstName"></li>
        <li>名：<input type="text" v-model="lastName"></li>
        <li>全名：{
  {getFullName}}</li>
        <li>全名：{
  {getFullName}}</li>
        <li>全名：{
  {getFullName}}</li>