Vue2

插值、指令、动态属性、表达式、v-html

1. 插值：{{ data }}
2. 指令 & 动态属性：例子（:id="xxx"）
3. 表达式：可以用于赋值，写在{{}}里面
4. v-html 替换绑定v-html的元素的所有子元素

计算属性

1. 计算属性有缓存，只在与其关联的数据更新时重新计算
2. 计算属性可以设置get和set函数。如果计算属性用于双向绑定，必须使用set来定义赋值操作

watch监听器

1. 监听数据变化，可以拿到 newValue 和 oldValue
2. 如果监听的是引用类型，需要添加属性deep: true, 并且提供handler函数
3. watch监听引用类型拿到的newValue和oldValue都是同一个~

动态绑定类名和样式

1. 类：
   1. 对象语法：是否添加该类，取决于该类名所对应的值，即isActive是否为true
   2. 数组语法：是否添加该类，取决于数组内是否有该类名
2. 样式: 在styleObj中定义样式属性

v-if 和 v-show 的区别

1. v-if : 创建dom，销毁dom
2. v-show: 操作css即可

v-for 列表循环

不推荐v-for和v-if一起使用，因为v-for的优先级比v-if高。所以会先去v-for渲染，然后再每一个去判断。

事件

1. vue事件对象的原型的构造函数是原生事件构造函数
2. vue根据我们在哪个元素上写了@click，就往哪个元素上绑定事件处理函数
3. 如果是多个参数，可以用$event传入

父子组件通信方式 之 props/$emit

1. 父组件中使用动态绑定属性传值
2. 子组件使用props属性接收
3. 子组件向父组件传值：this.$emit('add',...[arguments)
4. 父组件监听add事件@add="method"

兄弟组件通信方式

1. eventBus: 是一个Vue实例
2. eventBus.$emit('event', ...[arguments);
3. eventBus.$on('event', method);
4. 组件销毁的时候可以解绑事件监听，使用eventBus.$off('event', method);

父子组件生命周期执行顺序

1. created, mounted, beforeDestroyed
2. Vue实例创建时，父组件先创建，子组件先渲染
3. 在更新时，子组件先更新完，父组件才能更新完。但是是父组件先触发更新

什么是 nextTick

1. vue渲染是异步的，当我们更新数据时，vue不会马上去做渲染，而是在下一个tick的时候去做渲染
2. 如果需要准确获取vue更新后的结果的话，可以使用vue提供的api，vue.$nextTick(fn); 在fn中去获取需要的结果

slot 插槽

1. 什么是插槽？预留一个位置，可以让我们插入任何内容

    123
    123
    123



    



    

2. 子组件中slot标签的内容可以作为默认内容，如果没有内容传进插槽的话，就会显示默认内容

作用域插槽

    




{{ user.name }}

具名插槽

    
        

        
main content
        
main content

        
    





    

        
    
    

        
    
    

个人理解：slot有点像是说a组件指定了b组件里面的一些内容，前提是b组件需要提供一些接口，这个接口就是slot标签

动态组件

异步组件

当前组件如果不需要使用的话，但是一并加载进来会很影响性能，所以这时候需要异步组件。

// 语法：
components: {
    test: () => import('./components/test')
}

keep-alive

把想要保存的组件用keep-alive标签包裹起来

mixin

// mixin.js
// 抽离公共部分的逻辑
export default {
    data() {
        return {
            commonData: 123，
            commonData2: 234
        }
    },
    methods: {
        commonMethod1() {

        },
        commonMethod2() {

        }
    }
}

// vue
// 然后在vue中的mixin配置项配置一下
import mixin from './mixin';

export default {
    mixins: [mixin]
}