什么是
VUE.JS？
Vue.js是一套用于构建用户界面的渐进式JavaScript框架。Vue.js的目标是通过尽可能简单的API 实现响应的数据绑定和组合的视图组件。
前端三大主流架构 大比拼！
-
Vue VS React
-
数据运行表现
React当组件状态发生变化时，重新渲染整个组件子树。
Vue组件渲染过程自动追踪，系统能精确锁定目标。 -
向上扩展
Vue 路由库和状态管理库都是由官方维护支持。
React路由库和状态管理库由生态系统解决。
Vue 提供了 CLI 脚手架，引导用户构建项目。
React提供了create-react-app，但是只支持默认配置构建项目。 -
HTML & CSS
React 所有组件渲染功能都依靠JSX。
Vue甚至支持 JSX，默认推荐还是模板。 -
向下扩展
学React前，要了解JSX和ES2015。
Vue向下扩展后就类似于jQuery。不需学JSX，ES2015以及构建系统。 -
原生渲染
React Native 能使你用相同的组件模型，实现同时跨多平台开发。
Weex兼容Vue语法开发，支持在浏览器端，
iOS和Android上的原生应用组件。
-
Vue VS Angular
-
复杂性
在 API 与设计两方面上AngularJS复杂。
而Vue.js操作更加简单。 -
指令与组件
在 AngularJS 中，每件事都由指令来做，而组件是一种特殊指令。
在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件有自己的视图和数据逻辑。 -
数据绑定
AngularJS 使用双向绑定。
Vue 在不同组件间强制使用单向数据流。 -
运行时性能
在 AngularJS 中，当 watcher 越来越多时会变得越来越慢。
在 Vue 中，所有的数据变化都是独立触发，异步队列更新。
想进大厂
这些VUE常见的面试题型 都要掌握！
v-model是如何实现双向绑定的？
Vue 的父组件和子组件生命周期钩子执行顺序是什么？
单页面应用和多页面应用区别及优缺点？
子组件为什么不可以修改父组件传递的Prop？
vue-loader是什么？使用它的用途有哪些？
Vue-router跳转和location.href有什么区别？
为什么 Vuex 的 mutation 中不能做异步操作？
vue更新数组时触发视图更新的方法？
Vue里面router-link电脑可用，安卓上没反应？
课程内容讲变化 聊干货 立足实战 提升能力！
- Vue3.0源码结构全剖析
- 掌握TypeScript简介和环境搭建
- 了解VueJS2.0和
VueJS3.0的区别 - 掌握手写Vue3.0响应式原理
- 实现reactive、ref、 computed、 effect
- 详细剖析Vue3.0中DOM-DIFF算法原理
- 手写vite工具实现原理
- 熟练掌握Vue3源码进阶
VUE3.0从实战到源码全剖析技术实战课程大纲
- 第一天
- 第二天
- 第三天
-
上午
TypeScript
1.TypeScript简介和环境搭建
2.TypeScript静态类型
3.基础静态类型和对象静态类型
4.类型注解和类型推断
5.函数参数和返回类型的注解
6.数组类型注解的方法
7.元组的使用和类型约束
8.初识接口Interface
9.初识接口Interface2
10.类的概念和使用
11.类的访问类型
12.类的构造函数下午TypeScript
1.类的Getter、Setter和static
2.抽象类和只读属性的使用
3.配置文件-初识tsconfig.json文件
4.配置文件-初识compilerOptions配置项
5.配置文件-compilerOptions配置详解
6.联合类型和类型保护（类型守护）
7.Enum枚举类型详细讲解
8.TypeScript函数中使用泛型
9.TypeScrip在类中使用泛型
10.初识TypeScript的命名空间-NameSpace
11.深入TypeScript的命名空间-NameSpace
12.TypeScript如何使用impot语法
13.用Parcel打包TypeScript代码
14.在TypeScript中使用Jquery库 -
上午
Vue3
1.构建vue项目
2.2.0与3.0的差异
3.vue.config.js
4.Vue3.0开篇
5.diff算法
6.静态提升和监听缓存
7.项目创建
8.存在的问题
9.组合API上
10.组合API中
11.组合API下
12.组合API本质
13.setup执行时机和注意点
14.Vue3.0-ref
15.ref和reactive区别下午Vue3
1.递归监听
2.非递归监听
3.shallowRef本质
4.toRaw
5.markRaw
6.toRef
7.toRefs
8.customRef上
9.customRef下
10.ref-获取元素
11.readonly家族
12.V3响应式数据本质上
13.V3响应式数据本质下
14.手写shallowReactive-shallowRef
15.手写reactive-ref
16.手写readonly-shallowReadonly -
上午
Vite
1.Vite定义
2.Vite由来
3.对比差异点
4.Optimize
5.HMR
6.Build
7.打包 or 不打包
8.开箱即用
9.实现原理下午Vue3源码进阶
1.剖析Vue Composition API
2.源码目录
3.Vue2响应式原理机制-defineProperty
4.对象拦截
5.数组方法劫持
6.Vue3数据响应机制-Proxy
7.reactive方法实现
8.effect实现
9.ref实现
10.computed实现