Vue知识体系（自我复习）

Vue框架的使用

基本使用

常考：

• Vue组件如何通讯
• 描述组件渲染和更新的过程
• 双向数据绑定v-model的实现原理

知识点：

1. 模板（插值，指令）

2. computer和watch

   • computed 适合多个数据变化影响一个数据
   • watch 适合一个数据的变动影响多个数据或者复杂的运算

   注意：watch监听引用类型，拿不到oldVal；

   注意事项
   1.watcher 初始化是不执行的，如果想初始化就执行的话可以配置immediate属性
   2.一般情况不要直接修改computed的值，会报错，一般通过为computed属性自定义set方法，通过改变依赖变量来改变computed的值
   3.computed的属性如果不加入在dom中渲染是不会被加入到响应系统的。所以如果只是数据的变动的监控，不映射到dom上，请使用watcher或者其他方法。
   4.watcher和computed 属性定义的函数不能使用箭头函数，否则内部this会指向组件的父环境，比如window，导致调用失败。
   ————————————————
   版权声明：本文为CSDN博主「圣者为王」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
   原文链接：https://blog.csdn.net/weixin_41275295/article/details/100999927

3. class和style

4. 条件，循环，事件，表单

   v-if和v-show的区别和使用场景

   • 频繁切换用v-show[display:none]

   event参数，自定义参数，事件修饰符，按键修饰符

5. ---

   组件

6. 生命周期

7. props和$emit（类型和默认值）

8. v-on和$emit

9. 自定义事件-组件内通讯 - [$on,$off]

import Vue from 'vue'

export default new Vue();

高级特性 - 不常用，但体现深度

1. 自定义v-direction, 自定义v-model
2. $nextTick, $refs
3. slot
4. 动态、异步组件
5. keep-alive
6. mixin

常考:

• 自定义组件v-model

<input type="text" :value="text" @input="$emit('change', $event.target.value)"/>
    
 export default {
	model: {
        prop: 'text', // 对应 props text
        event: 'change'
    },
    props