VUE训练1-2年：生命周期、指令、use API 3-5年：思想、方案、封装、亮点 5-7年：框架无关、框架对比、核心

1-2年：生命周期、指令、use API
3-5年：思想、方案、封装、亮点
5-7年：框架无关、框架对比、核心思想（宿主环境）、源码，怎样影响你的工作
react是单向数据流，内部有fiber，每次更新会从头遍历，数据状态的改变来驱动fiber进行调度，来改变整个结果，react比较灵活
vue是通过对数据的劫持，监听到数据的变化，通知视图去更新
项目选型会从后期使用的场景、当前人员的技术栈、数据的调动

vue的生命周期有哪些，都做了些什么

生命周期，就是在一系列流程中，在某个阶段去执行某些方法

beforeCreate：组件都未被创建，el、data、methods、computed都还不能使用
created：实例已经完成创建了，watch、event、data初始化都完成了，没有挂载，$el无法获取
beforeMount：数据已经被劫持了，下面是渲染到界面上去了
mounted：已经完成渲染，可以进行一些数据处理，整个组件的挂载完成，初始化结束
beforeUpdate：响应式数据更新后，触发watcher，在nextTick中会调用vm._update(vm._render, hydrating)函数
updated：已经经历了一系列的patch、diff，调用updated
beforeDestory：销毁节点、组件
destoryed：在一些清理逻辑完成以后，父子关系、watcher会执行一些销毁关闭

data是一个函数的原因，如何理解vue的模块化

如果data是一个对象，data指向的是同一个内存，当定义多个内存中有同名的属性时，修改一个组件中的属性会影响其他组件的值，如果为函数，会形成函数作用域，保证组件之间的属性变量互相不被污染

const data = {message:'hello world'}
const com1 = new Vue({
    el:'#app1',
    data
})
const com2 = new Vue({
    el:'#app2',
    data
})

vue的指令有哪些，如何书写自定义指令

指令：v-for、v-bind、v-if、v-show、

vue允许用户通过以全局注册或局部注册的方式，添加自定义指令

全局main.js中定义

Vue.directive('demoName',{
    // 只调用一次，指令第一次绑定元素时调用，主要进行初始化
    bind(el){},
    // 被绑定元素插入到父节点的时候调用
    inserted(){},
    // 所在组件的Vnode更新时调用
    update(){},
    // 所在组件的Vnode更新后调用
    componentUpdated(){},
    // 只调用一次
    unbind(){}
})

组件间不同传参方式，有何优劣

（1）props、$emit：用于父子组件之间通信

优点：简单、常见，props有类型检查
缺点：跨级上比较麻烦

（2） $ref、$ children（$parent）：用于指向性通信

优点：能够拿到父子组件的实例
缺点：难以维护，从某种意义上，是打破了数据封装（3）EventBus：( $emit、$ on)隔代、兄弟等非直接通信
原理简单，多层组件的事件传播容易解决
很难模块化，多人开发不好统一， $on对应的$ off忘写，会浪费资源（4） $attrs、$ listener：隔代等监听型通信（常用于一些对原生组件的一些封装）

（5）provide、inject：隔代广播等

解决一层层传递的问题
非响应式（6）vuex：整体状态机
优点：多层组件的事件传播，单向数据流，统一状态管理

react解决兄弟组件传值：在父组件里就是状态提升；context

什么是函数组件，函数式组件应该注意的事项？

vue如何实现数据驱动双向绑定的？响应式是如何实现的

v-model的含义是什么，不同版本的区别

vue2中是一个语法糖

<input :value="foo" @input="foo = $event.target.value" />

.sync修饰符

<input :value="foo" @updata:value="foo = $event.target.value" />

vue3中为了让v-model更好的针对多个属性进行双向绑定，去掉了sync，原本的功能，由v-model来代替；对自定义组件使用v-model时，value->modelValue

<input :value="foo" @updata:modelValue="foo = $event.target.value" />

vue2和vue3中diff对比

vue3中使用了最长上升子序列

莱文斯坦最短编辑距离（让每一个点知道，怎么做代价最小）

computed和watch区别

computed：

有缓存，只有依赖的数据发生变化才会重新计算，不支持异步
一般一个属性，可以由其他属性计算而来

watch：

无缓存，可异步
常用于深度监听时
性能开销大

$router 和$ route的区别

$router：路由器，访问整个项目的路由结构

router.beforEach()
router.afterEach()
router.push()
router.replace()
router.go()
router.back()
router.forward()

$route：路由本身，可以获取路由的静态信息，如path、fullpath、hash、meta、query、params

VUE训练