1. Vue3 比 vue2 优势
1. 性能更好
2. 体积更小
3. 更好的ts支持
4. 更好的代码组织
5. 更好的逻辑抽离
6. 更多新的功能
2. Vue3 生命周期
1. Options API生命周期
2. Composition API生命周期
3. 如何看待composition API 和options API
1. Composition API 更好的代码组织,更好的逻辑复用,更好的类型推到
2. 小型项目,业务逻辑简单,用Options API
3. 中大型项目,业务逻辑复杂的,用Composition API
4. Composition API 是为了解决复杂业务逻辑而设计的
5. 类似React Hooks
4. 如何理解ref toRef和toRefs?
1. ref
1. 生成值类型的响应式数据
2. 可用于模板和reactive
3. 通过.value修改值
2. toRef
1. 针对一个响应式对象(reactive封装)的prop
2. 创建一个ref,具有响应式
3. 两者保持引用关系
3. toRefs,避免模板中导出都是state
1. 将响应式对象(reactive封装)转换成普通对象
2. 对象的每个prop都是对应的ref
3. 两者保持引用关系
4. 最佳使用方式
1. 用reactive做对象的响应式,用ref做值类型的响应式
2. setup中返回toRefs(state),或者toRef(state, 'prop')
3. ref的变量命名都用xxxRef
4. 合成函数返回响应式对象时,用toRefs
5. ref toRef toRefs进阶,深入理解
1. 为何需要ref?
1. 返回值类型,会丢失响应式
2. setup、computed、合成函数,都有可能返回值类型
3. Vue如果不定义ref,用户将自定义ref,反而混乱
2. 为何需要.value?
1. ref是一个对象(不丢失响应式),value存储值
2. 通过.value属性的get和set实现响应式
3. 用于模板、reactive时,不需要.value,其他情况都需要
3. 为何需要toRef toRefs
1. 初衷:不丢失响应式的情况下,把对象数据进行分解和扩散
2. 前提:针对的事响应式对象,不是普通对象
3. 注意:不创造响应式,而是延续响应式
6. Vue3 升级了哪些重要的功能?
1. createApp:创建vue实例的方式
2. emits属性,组件中的事件要先使用emits进行声明,然后在setup的形参引入
3. 生命周期
4. 多事件
5. fragment:不再限制唯一根节点
6. 移除.sync:
7. 异步组件的写法:Vue2 直接import进来,Vue3需要使用defineAsyncComponent包裹一层
8. 移除filter
9. teleport:把组件直接to到某个dom
10. suspense:fallback,就是一个具名插槽
11. composition API
7. Composition API如何实现代码逻辑复用?
1. 抽离逻辑代码到一个函数
2. 函数命名约定为useXXX格式(React Hooks也是)
3. 在setup中引用useXXX函数
8. Reflect作用
1. 与proxy能力对应
2. 规范化,标准化,函数式
3. 替代Object上的工具函数
9. Vue3 如何实现响应式?
10. watch和watchEffect的区别是什么?
1. 二者都可以监听属性变化
2. watch需要明确监听哪个属性
3. watchEffect会根据其中的属性,自动监听其变化
11. setup中如何获取组件实例?
1. setup和其他Composition API中都没有this
2. 在Options API中仍然可以使用this
3. Composition API中可以使用getCurrentInstance方法获取
12. Vue3为何比Vue2快?
1. Proxy实现响应式
2. patchFlag https://vue-next-template-explorer.netlify.app/
1. 编译模板时,动态节点做标记
2. 标记,分为不同的类型,如TEXT,PROPS
3. diff时,区分静态节点和不同类型的动态节点
3. hoistStatic
1. 将静态节点的定义,提升到父作用域,缓存起来,空间换时间
2. 多个相邻的静态节点,会被合并起来,编译优化
4. cacheHandler
缓存事件
5. SSR优化
静态节点直接输出为dom,绕过vdom
6. tree-shaking
编译时,按需引入API
13. Vite是什么?
1. 前端打包工具
2. 在开发环境下,使用ES6 Module,不打包,启动快
3. 生产环境打包使用rollup
14. Composition API和React Hooks的对比
1. 前者setup(生命周期create)只会被调用一次,后者函数会被多次调用
2. 前者无需useMemo,useCallback,因为setup只调用一次
3. 前者无需考虑调用顺序,后者需要保证hooks的顺序一致
4. 前者reactive + ref 比后者的useState,要难理解