Vue基礎——Vue實例、計算屬性和偵聽器

Vue實例

vue的每一個組件都是一個實例，該實例對應很多屬性和方法。
所接受的數據類型：number/string/boolean/array/json/undefined/null

	<div id="root">
		<div @click="fn">
			{{message}}
		</div>
	</div>
 
	<script>
		var vm = new Vue({
			el: '#root',
			data: {
			    message: 'hello world'
			},
			methods: {
                fn: function () {
					alert("hello")
                }
			}
		})
	</script>

數據綁定

插值表達式

{{數據名}} mustache語法 聲明式渲染

指令

v-text=“數據名”`

v-html="數據" 非轉義輸出

屬性
v-bind:html屬性="數據" 屬性值動態化
:html屬性="數據" 簡寫
v-bind:[屬性名]="數據" 屬性名動態化

Vue實例的生命週期鉤子

每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命週期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會

生命週期鉤子的 this 上下文指向調用它的 Vue 實例。

查看官網介紹

不要在選項屬性或回調上使用箭頭函數，比如created: () => console.log(this.a)或 vm.$watch('a', newValue => this.myMethod())。
因爲箭頭函數並沒有 this，this 會作爲變量一直向上級詞法作用域查找，直至找到爲止，經常導致Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function之類的錯誤。

計算屬性

官網教程
是一個函數,所依賴的元數據變化時，會再次執行，平時會緩存，是響應式的，需要在模板中渲染纔可調用

語法

//定義
computed:{
  計算屬性: function(){return 返回值}		
}
//使用
使用:	{{計算屬性}} |  v-指令="計算屬性"

computed    VS    method

method	computed
方法會每次調用	基於它們的響應式依賴進行緩存的
一般	性能高
{{methodname()}}	{{computedname}}
適合強制執行和渲染	適合做篩選

屬性檢測

官網教程
需要在數據變化時執行異步或開銷較大的操作時，而計算屬性是同步的，這個時候需要屬性檢測watch

定義一個選項

watch:{
  數據名:'method函數名'    //數據名==data的key
  數據名:函數體(new,old){}
  數據名:{
    handler:fn(new,old){},
    deep: true //深度檢測
    immediate: true //首次運行
  }
}

計算屬性 VS 函數 VS 屬性檢測

	計算屬性	函數	屬性檢測
依賴模板調用	√	-	×
是否緩存	√	×	√
異步	×	√	√

模板表達式

在dom裏面插入數據，數據周圍可以出現表達式，但不是語句，如{{數據+表達式}} v-指令="數據+表達式"

表達式：

1. title + 'abc'
2. `${title}123` 
3. bl ? 'true' : 'false'
4. 'i love you'.split(' ').reverse().join(' ')