闻人放歌的三寸青草园圃

前者setup只会被调用一次，而后者函数会被多次调用前者无需useMemo useCallback，因为setup只会调用一次前者无需顾虑调用顺序，而后者需要保证hooks的顺序一致前者reactive+ref比后者useState，要难理解

从编译结果代码可以看出，如果该事件方法已被定义则直接去缓存中的方法，没有则定义。静态字段将不再比较，这样diff算法将少比较很多节点。编译时，根据不同的情况，引入不同的API。

【代码】setup中如何获取组件实例。

可以看出watchEffect会灵活很多。

Proxy能规避Object.defineProperty的问题，但是无法兼容所有浏览器，无法polyfill。废话不多说，直接上代码。

【代码】Composition API实现逻辑复用。

在vue2.x中必须有根节点，按vue3.x这种写法会直接报错。vue3.x中会自动创建fragment，类似react的<></>。可以帮我控制显示和隐藏，在组件加载时显示fallback插槽内容。

合成函数(可以理解为hooks)返回响应式对象。

Composition API带来了什么？更好代码组织更好的逻辑复用更好的类型推导如何选择不建议共用，会引起混乱小型项目、业务逻辑简单，用Options API中大型项目、逻辑复杂，用Composition API

性能更好体积更小更好的ts支持更好的代码组织更好的逻辑抽离

合理使用v-show和v-if合理使用computedv-for时加key，以及避免同时使用v-for和v-if自定义事件、DOM事件及时销毁合理使用异步组件合理使用keep-alivedata层级不要太深使用vue-loader在开发环境做模板编译（预编译）webpack层面的优化前端通用的性能优化，如图片懒加载使用SSR

解绑自定义事件event.$off清除定时器解绑自定义的DOM事件，比如 window scroll等

响应式： 监听data属性getter setter(包括数组)模板编译： 模板到render函数再到vnodevdom： patch(elem, vnode)和patch(vnode, newVnode)

vue2

只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。有如下场景，需要渲染一个新闻页面，包括图片、文字等内容时，怎么渲染？当不确定渲染的是什么组件时，就需要用到动态组件了。当组件渲染的时候， 将会被替换为“Your Profile”。3、v-model的实现原理。