                        課程
                    
                        /前端開發
                        
                            /Vue.js
                        
                        /快速入門Web閱讀器開發

關于電子書的解析和渲染中的數據和方法

為什么在這個函數中可以直接使用this.book等數據和方法，而不用在data、methods中定義??？求解惑！感謝！

AB_Ciel

2018-08-29

源自：快速入門Web閱讀器開發

關注問題我要回答

1300

操作

收起

3 回答

Sam 回答被采納 +2 積分
2018-08-29

重新發一遍，方便大家閱讀

this.book?=?xxx

這里的?this?表示Vue實例，this.book表示給Vue實例動態添加了一個book屬性，下面舉例證明：

created()?{
??this.book?=?{
????a:?1,
????b:?2
??}
??console.log(this)
}

通過打印Vue實例可以很清楚的看到，this.book會在Vue實例下創建book屬性，指向book對象

---------------------------------------------------------------------------------------------------------------------
對于這個問題可以再延伸一下：

this.book = xxx 和將book定義在data中有什么區別？
從使用角度來看，看不出區別，但是無法通過this.$data.book獲取到book，因為book沒有定義在data中，下面舉例說明：

export?default?{
??data()?{
????return?{
??????test:?[1,?2,?3]
????}
??},
??created()?{
????this.book?=?{
??????a:?1,
??????b:?2
????}
????console.log(this.$data)
????console.log('this.$data.test',?this.$data.test)
????console.log('this.$data.book',?this.$data.book)
??}
}

從打印結果中可以看出，test可以通過this.$data.test獲取，但是book不行，因為this.$data中只包含test對象。當然實際開發過程中，為了簡便，我們仍然可以通過this.test獲取test的值。

0 回復有任何疑惑可以回復我~

收起回答

AB_Ciel 提問者

get到了，感謝老師的詳細回復啊1

2018-08-31 回復有任何疑惑可以回復我~

Sam
2018-08-29

用手機回復的，效果一般，湊合一下：）

0 回復有任何疑惑可以回復我~

收起回答

Sam
2018-08-29

你好，這是一個好的問題

this.book = ...

這里的this表示Vue實例，this.book表示給Vue實例動態添加了一個book屬性，下面給一個例子進行證明

created() {
this.book = {
a: 1,
b: 2
}
console.log(this)
}

通過打印Vue實例完美可以很清楚的看到，在Vue實例下創建了一個book對象

對這個問題再延伸一下：

this.book = ... 和將book定義在data中有什么區別？

從使用角度來看，看不出區別，但是無法通過this.$data.book獲取到book，因為book沒有定義在data中，下面舉例說明

export default {
data() {
return {
test: [1, 2, 3]
}
},
created() {
this.book = {
a: 1,
b: 2
}
console.log(this.$data)
console.log('this.$data.test', this.$data.test)
console.log('this.$data.book', this.$data.book)
}
}

從打印結果中可以看出，test可以通過this.$data.test獲取，但是book不行，當然實際開發過程中，為了簡便，我們仍然會通過this.test獲取test的值