diff方法优化：
+ vue2中的虚拟dom是进行全量的对比（不管dom有没有发生变化，都要进行对比）
+ vue3新增了静态标记（patchFlag）
在与上次虚拟节点进行对比时，只对比带有patch flag的节点
并且可以通过flag的信息得知当前节点要对比的具体内容
hositStatic 静态提升：
+ vue2 中无论元素是否参与更新，每次都会重新创建，并重新渲染。
+ vue3 中对对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可。
<div>
<p>我是仙女🧚♀️</p>
<p>我是仙女🧚♀️</p>
<p>我是仙女🧚♀️</p>
<p>我是仙女🧚♀️!!!!!!</p>
</div>
// 静态提升前：
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("p", null, "我是仙女🧚♀️"),
_createVNode("p", null, "我是仙女🧚♀️"),
_createVNode("p", null, "我是仙女🧚♀️"),
_createVNode("p", null, _toDisplayString(_ctx.msg) + "}", 1 /* TEXT */),
]))
// 静态提升后：
const _hoisted_1 = /*#__PURE__#*/_creareVNode("p", null, "我是仙女🧚♀️", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__#*/_creareVNode("p", null, "我是仙女🧚♀️", -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__#*/_creareVNode("p", null, "我是仙女🧚♀️", -1 /* HOISTED */)
}
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_hoisted_1,
_hoisted_2,
_hoisted_3,
_createVNode("p", null, _toDisplayString(_ctx.msg) + "}", 1 /* TEXT */)
]))
}
cacheHandlers 事件侦听器缓存
默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化
但是因为是同一个函数，所以没有追踪到变化，因此直接缓存起来复用即可
ssr缓存
+ 当有大量静态内容的时候，这些内容会被当作纯字符串推进一个buffer里面，
即使存在动态的绑定，会通过模版插入值嵌入进去。这样会比通过虚拟dom来渲染的快上很多很多。
+ 当静态内容大到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHTML，就不需要创建对象，然后依据对象渲染
setup
1、setup执行时机：
setup
beforeCreate：表示组件刚刚被创建出来，组件的data和methods还没有初始化好。
created：表示组件刚刚被创建出来，并且组件的data和methods已经初始化好了。
2、setup注意点：
- 由于在执行setup函数时，还没有执行created函数生命周期方法
所以在setup函数中，是无法使用data和methods的
- 由于我们不能在setup函数中使用data和methods，
所以vue为了避免我们错误的使用，它直接将setup函数中的this改成了undefined
- setup只能是同步的，不能是异步的。
reactive
1、什么是reactive
- reactive是vue3中提供的实现响应式数据的方法。
- 在vue2中响应式数据是通过defineProroperty来实现的。
而在vue3中是响应式数据是通过ES6的Proxy来实现的。
2、reactive注意点：
- reactive的参数必须是对象（arr/json）
- 如果给reactive传递其他对象
+ 默认情况下修改对象，界面不对自动更新
+ 如果想要更新，可以通过重新赋值的方式
ref
1、什么是ref
- ref和reactive一样，也是用来实现响应式数据的方法。
- 由于reactive必须传递一个对象，所以导致在企业开发中
如果我们只想让某个变量实现响应式的时候会非常麻烦
所以vue3给我们提供了ref，实现对简单值的监听
2、ref本质
- ref底层的本质其实还是reactive
- 系统会根据我们给ref传入的值自动将他转换成
ref(xx) -> reactive({ value: xx })
3、注意点：
- 在vue中使用ref的值不用通过value来获取
- 在js中使用ref的值必须通过value来获取
ref和reactive的区别
- 如果在template中使用的是ref类型的数据，vue会自动帮我们添加.value
- 如果在template中使用的是reactive类型的数据，vue不会自动帮我们添加.value
- vue是如何决定是否需要自动添加.value类型的
+ vue在解析数据之前，会判断这个数据是不是ref类型的，
+ 如果是，就自动添加.value
- vue是如何判断当前的数据类型是否是ref类型的
+ 通过当前数据的_ _v_ref来判断的
+ 如果有这个私有属性，并且取值为true，那么就代表此数据是一个ref类型的数据。
递归监听
1、默认情况下，无论是通过ref还是reactive都是递归监听
2、递归监听存在的问题
- 如果数据量比较大，非常消耗性能
非递归监听（shallowRef shallowReactive）
- 如何出发非递归监听属性更新界面？
如果是shallowRef，使用triggerRef来出发
- 应用场景
一般情况下，我们使用ref和reactive即可
只有在需要监听的数据量比较大的时候，我们才使用shallowRef和shallowReactive
toRaw
- 从reactive或则 ref中得到原始数据
- toRwo的作用：
做一些不想被监听的事情（性能提升）
- ref和reactive数据类型的特点：
每次修改都会被追踪，都会更新UI界面，但这样其实是非常消耗性能的
所以如果我们有一些操作不需要追踪，不需要更新UI界面，那么这个时候
我们就可以通过toRaw方法拿到它的原始数据，对原始数据进行修改
这样就不会被追踪，不会更新UI界面，性能也就更好了
import { reactive, toRaw} from 'vue'
setup() {
let obj = { name: 'zs', age: 18 }
let state = reactive(obj)
let obj2 = toRaw(state)
console.log(state === obj) // false
console.log(obj2 === obj) // true
}
import { ref, toRaw} from 'vue'
setup() {
let obj = { name: 'zs', age: 18 }
let state = ref(obj)
let obj2 = toRaw(state.value)
}