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>