JS：以下函数中的this指向相同么？

Question

使用vueJS部署一个项目，遇到一个js问题：
以下函数用来添加书籍：

    addBook : function(){
                this.book.id = this.books.length + 1;
                this.books.push(this.book);
                this.book = '';
            }

html部分：
<h1>书目信息</h1>

        <div id="app">
        <!-- 表格显示区域 -->
        <table  class="table">
            <tr>
                <th>序号</th>
                <th>书名</th>
                <th>价格</th>
                <th>删除</th>
            </tr>
            <tr v-for = 'book in books'>
                <td>{{book.id}}</td> 
                <td>{{book.title}}</td>
                <td>{{book.price}}</td>
                <td>
                    <button  class="btn btn-danger" @click = 'deleteBook(book)'>删除</button>
                </td>
            </tr>
            
        </table>
        <!-- 用户点击添加区域 -->
               <legend>添加书籍</legend>
               <div class="form-group">
                   <label>添加书名</label>
                   <input type="text" class="form-control" v-model = 'book.title' >
               </div>
               <div class="form-group">
                   <label>添加价格</label>
                   <input type="text" class="form-control" v-model = 'book.price' >
               </div>
               <button class="btn btn-block btn-success" v-on:click = 'addBook()'>确认添加</button>
        </div>
        
        我的个人理解是：
        this.books 是指#app中的books[]
        this.book 是指当前按钮控制的用户添加区域
        
        以下是截图：
        

谢谢

Answer 1

在同一个上下文中，this肯定是同一个，不可能一会指向这，一会指向那。

Answer 2

this是这个模块。
v-model = 'book.title'这里是把this.book.title双向绑定在添加书名这个input上了。
v-for = 'book in books'这里是把this.books绑定到tr上。tr里的book是遍历this.books这个数组。