前端框架面学习笔记（一）

vue基本 

1. computed和watch区别

2.v-if，v-show

3.v-for遍历，key重要性，和v-if不能一起用

4.事件$event :以点击事件为例，$event是触发事件，$event.target是绑定的组件

5.事件修饰符，按键修饰符

.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡

.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）

.capture：与事件冒泡的方向相反，事件捕获由外到内

.self：只会触发自己范围内的事件，不包含子元素

.once：只会触发一次

6.组件使用

兄弟组件传值使用自定义事件，同时在beforedestoryed中调用 $off销毁

7.生命周期

created 组件初始化没渲染 mounted 组件已经渲染

父子组件的生命周期：created 从外到内 mounted 从内到外 外父内子

before updated 先父元素再子元素

updated 先子元素再父元素 

销毁时beforeDestory函数的传递顺序为由父到子，destory的传递顺序为由子到父。

8.高级特性

  refs

自定义v-model ：<input :value='text' @input='$emit('change',$event.target.value)'> text和change自定义函数

$nextTick：DOM渲染之后触发，获取最新的DOM结点，多次data修改只会渲染一次

slot：作用域插槽 具名插槽

动态组件： <component :is="xxx"></component> 动态改变组件

异步组件：举例：在components内部注册时使用箭头函数 TreeFolderContents: () => import('./tree-folder-contents.vue')   就会按需加载 提高性能

keep-alive ：多次切换不需要重复渲染-性能优化  层级过多，tab切换使用。

mixin混入：多个组件有相同逻辑。引入避免重复命名。缺点：变量来源不明，命名冲突，可能与多个组件耦合，复杂度高。

 9.vuex 

10.vue-router 懒加载 两种模式