vue3.0六大亮点

• performance：性能比vue2.0快1.2-2倍
• tree shaking support：按需编译，体积比2.0更小
• composition API：组合API（类似React Hokks）
• better typescript support：更好的ts支持
• custom renderer API：暴露了自定义渲染API
• fragment，teleport（protal）suspense：更先进的组建

vue3.0 如何变快的？

• 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 */)
	]))
}

1. cacheHandlers 事件侦听器缓存

   默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化
   但是因为是同一个函数，所以没有追踪到变化，因此直接缓存起来复用即可
   

2. 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)
}