亮点
- Performance:性能比Vue2.x快1.2~2倍
- Tree shaking support:按需编译 体积比vue2.x更小
- Composition API: 组合API(类似React Hooks)
- Better TypeScript Support:更好的TS支持
- Custom Render API:暴露了自定义渲染API
- Fragment, Teleport(Protal), Suspense: 更先进的组件
快的原因
diff算法优化
-
Vue2.x中的虚拟DOM是进行全量对比的
-
Vue3新增了静态标记(PatchFlag):在与上次虚拟DOM对比时，只对比带有PatchFlag的节点，并且可以通过PatchFlag的信息得知当前节点要比对的具体内容
-
Vue 3 Template Explorer:vue-next-template-explorer.netlify.app/
hosictStatic 静态提升
-
Vue2.x中无论元素是否参与更新，每次都会重新创建(createVNode)，然后再渲染。
-
Vue3中对于不参与更新的元素，会做静态提升，只会创建一次，在渲染时直接复用即可。
cacheHandlers 事件侦听器缓存
- 默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化，但是应为是同一个函数，所以没有追踪变化，直接缓存起来复用即可。
ssr渲染
当大量静态的内容时候，这些内容会被当做纯字符串推进一个Buffer里面，即使存在动态绑定，会通过模板插值嵌入进去，这样会比通过虚拟DOM来渲染的快上很多很多。
当静态内容大到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static node,这些静态node，会被直接innerHtml,就不需要创建对象，然后根据对象渲染。
创建Vue3 项目
Vue-Cli
- npm install -g @vue/cli
- vue create ProjectName
- cd ProjectName
- vue add vue-next
- npm run serve
Webpack
- git clone github.com/vuejs/vue-n… ProjectName
- cd ProjectName
- npm install
- npm run dev
vite创建(后面单独说说vite)
Composition API
2.x存在问题
数据与业务逻辑分散 引申(Vue3.0组合API)
Composition API解决options API的一个特点就是在对应的属性中写对应的功能模块。
Composition API把功能模块进行抽取成一个函数，直接调用。
setup函数
两个参数：props context
返回值
1.返回值可在template中使用,也就是说可以使用setup的返回值替代data选项
setup中没有this
setup函数执行时没有对this进行绑定，不会找到组件实例,setup的调用在data,computed,methods被解析之前。
对于props解构失去响应式
Reactive(数据响应式处理)
参数为对象或者数组类型
Ref(数据响应式处理)
返回一个可变的响应式对象,它内部的值在ref的value属性中维护。
ref-获取元素
ref 与 reactive 区别
递归监听
非递归监听
shallowRef
创建一个浅层的ref对象。
shallowRef本质
shallowReactive
创建一个响应式代理,但是它只对浅层做了响应式处理,深层的还是原始对象。
shallowReadonly
创建一个只读的proxy,但是它只对浅层做了只读处理,深层的还是可读可写。
readonly
传入其他组件的这个响应式对象只被使用,不允许修改。readonly返回原生对象的只读代理，原理就是依然是proxy，但是这个proxy set方法被劫持。
isReadonly shallowReadonly
isReadonly: 检查对象是否是readonly创建的代理。
shallowReadonly: 创建一个只读的proxy,但是它只对浅层做了只读处理,深层的还是可读可写。
toRaw
返回reactive或readonly代理的原始对象。
markRaw
toRef
将reactive对象中一个属性转成ref,建立连接。
toRefs
如果硬解构reactive数据那么解构出来的数据不具有响应式,使用toRefs将解构出来的数据变成ref响应式对象。
将reactive对象中所有属性都转成ref,建立连接。
isRef
判断是否是一个ref对象。
isReactive
检查对象是否是由reactive创建的响应式代理。 如果改代理是readonly创建的，但是用reactive包裹创建的另一个代理，它会返回true。
isProxy
检查对象是否是由reactive或readonly创建的代理。
unref
判断参数是否是一个ref,是返回.value值,否返回参数本身。
相当于 val = isRef(val) ? val.value : val;
triggerRef
手动触发和shallowRef相关联的副作用。
customRef
创建一个自定义ref,对其依赖项跟踪和更新触发进行控制。
接收一个函数,该函数接受track和trigger两个参数，并且返回一个带有get,set的对象。
computed
watch
惰性-只有依赖项发生变化才执行。
watchEffect
用于自动收集响应式数据的依赖，立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
基本使用
停止侦听
清除副作用
第二个参数(设置初始化就执行还是挂载dom后再执行)
生命周期钩子函数
provide inject
hook
Teleport
组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。跟react protal传送门一个意思。
