1. $set

this.$set(目標對象target，改的位置，最終數據)

/* 數據更新了而視圖沒有更新的情況 */
<template><div>{{ arr }}<button @click='btn'>按鈕</button></div>
</template>
<script>
export default {name: 'HomeView',data () {return {arr:['a','b','c']}},methods:{btn(){// this.arr[1] = 'xxxx'; 這樣寫是不對的，數據會更新但視圖并不會更新this.$set(this.arr, '1', '更新成這個字符串'); // 可以利用$set來使數據和視圖都更新}}
}
</script>

2. $nextTick

$nextTick返回的參數（函數）是異步的

/* 如果想要在beforeCreat或者說created生命周期中想要獲取dom，就可以用到$nextTick*/
export default {name: 'HomeView',created() {this.$nextTick(()=>{console.log( this.$el );})}
}

3. $refs

用來獲取dom的

4. $el

用來獲取當前組件的根節點的

5. $data

用來獲取當前組件的data數據的

6. $children

獲取當前組件的所有子組件

7. $parent

找到當前組件的父組件，如果找不到返回自身

8. $root

找到根組件

9. data定義數據

數據定義在data的return內和return外是不一樣的

<template><div>{{ str }} {{ num }}</div><button @click='btn'>按鈕</button>
</template>
<script>
export default {data() {this.num = 2222; //寫在data的return外面return {str: 1111 // 寫在data的return里面}},methods: {btn(){this.str = 'xxxx' // return里面的數據，是可以被修改的// this.num = 'yyyy' 寫在return外面的數據 單純的是不可以被修改的 因為沒有被get/set}}
}
</script>

10. computed計算屬性

<template><div>{{ str }} {{ changeStr }}</div><button @click='btn'>按鈕</button>
</template>
<script>
export default{data(){return {str: 'abc'}}.computed:{changeStr(){return this.str.slice(-1)}}
}
</script>

computed計算屬性的結果值可以修改嗎？

可以的，但是需要通過get/set寫法

<template><div>{{ str }} {{ changeStr }}</div><button @click='btn'>按鈕</button>
</template>
<script>
export default{data(){return {str: 'abc'}},computed:{changeStr:{get(){return this.str.slice(-2)},set( val ){this.str = val;}}},methods: {btn(){this.changeStr = 'zzzzz';}}
}
</script>

當前組件v-model綁定的值是computed計算而來的，可以修改嗎

可以的，但是需要通過get/set寫法

<template><div>{{ str }} {{ changeStr }}</div><input type="" name="" v-model='changeStr' />
</template>
<script>
export default{data(){return {str: 'abc'}},computed:{changeStr:{get(){return this.str.slice(-2)},set( val ){this.str = val;}}}
}
</script>

11. watch

數據發生變化的時候執行

<template><div>{{ str }}</div><button @click='btn'>按鈕</button>
</template><script>
export default {data() {return {str: '123',}},methods:{btn(){this.str = 'xxxx'}},watch:{str(newVal, oldVal){console.log(newVal,oldVal);}}
}
</script>

讓watch初始化的時候就執行

<template><div>{{ str }}</div><button @click='btn'>按鈕</button>
</template><script>
export default {data() {return {str: '123',}},methods:{btn(){this.str = 'xxxx'}},watch:{str:{handler(newVal,oldVal){console.log(newVal,oldVal)}},immediate: true}
}
</script>

深度監聽

<template><div>{{ str }}</div><button @click='btn'>按鈕</button>
</template><script>
export default {data() {return {str: '123',obj:{a: '1'}}},methods:{btn(){this.str = 'xxxx'this.obj.a = '2'}},watch:{obj:{handler(newVal,oldVal){console.log(newVal,oldVal)}},immediate: true,deep: true}
}
</script>

12. methods和computed區別

methods里面寫的是方法，computed是計算屬性

computed是有緩存機制的，methods是沒有緩存機制的（調用幾次執行幾次）

<template><div>{{ price }}{{ total }}{{ total }}{{ total }}</div>
</template><script>
export default {data(){return {number: 1,price: 29}},computed:{total(){console.log('computed---') // 只會打印一次return this.number*this.price}}
}
</script>

<template><div>{{ price }}{{ total() }}{{ total() }}{{ total() }}</div>
</template><script>
export default {data(){return {number: 1,price: 29}},methods:{total(){console.log('methods----') // 會打印3次return this.price*this.number}}
}
</script>