Vue相关

[L-small]

data为什么用return返回

Vue组件就是一个Vue实例，所以可以通过原型链继承，为了保证实例data的独立性，实例化组件的时候只是调用函数的数据副本。new Vue因为不会被复用，所以可以直接是个对象

vue3的变化

• 响应式换成了proxy，可以实现数组和对象变化时的监听，还不用在初始化时创建所有observer，用的时候才监听。IE还是不行还用以前的
• Composition API

keep-alive

组件缓存，跳转后再返回仍保持而不是重新渲染。

初次进入时：
created > mounted > activated
退出后触发 deactivated
再次进入：
只会触发 activated

父子组件生命周期关系

挂载时子组件先于父组件，销毁前父组件先于子组件
初始化和挂载时：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新：
父beforeUpdate->子beforeUpdate->子updated-<父updated
父组件更新
父beforeUpdae->父updated
销毁过程
父beforeDestroy->子beforeDestruy->子destroyed->父destroyed

父组件可以监听子组件生命周期

子组件上加@hook:xxxx来监听

v-model原理

是个语法糖，内部为不同输入元素使用不同的属性并抛出不同的事件

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

<input v-model='something'>
相当于
<input v-bind:value="something" v-on:input="something = $event.target.value">

在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件，如下所示：

父组件：
<ModelChild v-model="message"></ModelChild>
子组件：
<div>{{value}}</div>
props:{
    value: String
},
methods: {
  test1(){
     this.$emit('input', '小红')
  },
},

Vue组件间通信

• props/$emit 父子组件
• ref和$parent/$children，ref在子组件上，引用指向子组件实例
• EventBus，$emit/$on 适用于父子、隔代、兄弟
• $attrs/$listeners 适用于隔代组件通信
• provide/inject 适用于隔代
• vuex

Vuex

• state 应用状态
• Getter组件从store中弄过获取数据，辅助函数仅仅是将store中的getter映射到局部计算属性
• Mutation唯一更改store中状态的方法，必须同步
• Action 提交Mutation
• Module 将单一的store拆分成多个store且同时保存单一的状态树

VNode

v-key

当patch时，如果oldStartIndex oldEndIndex newStartIndex newEndInx都不匹配，则会将老的生成一个v-key为键值的对象，然后直接找相同的