初识Vue3—与Vue2的不同

Vue3与Vue2的区别

Vue3向下兼容

一.从options API到Composition API

vue3具有的composition API实现逻辑模块化和重用
vue3中使用setup函数（比beforeCreated更早执行）
接收两个参数 props（响应式不能用ES6结构）和context（普通JavaScript对象）

生命周期改变

setup语法糖

1.组件自动注册

<template>
    <Child />
</template>
<script setup>
import Child from './Child.vue'
</script>

2.组件核心API的使用

使用props

通过defineProps指定当前 props 类型，获得上下文的props对象

<script setup>
  import { defineProps } from 'vue'
  const props = defineProps({
    title: String,
  })
</script>

使用emits

使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit

<script setup>
  import { defineEmits } from 'vue'
  const emit = defineEmits(['change', 'delete'])
</script>

获取 slots 和 attrs

可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后，废除了这个语法，被拆分成了useAttrs和useSlots

<script setup>
  import { useContext } from 'vue'
  const { slots, attrs } = useContext()
    
  import { useAttrs, useSlots } from 'vue'
  const attrs = useAttrs()
  const slots = useSlots()
</script>

3.defineExpose API

传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的 template模板，谁都不能访问内部的数据和方法。

如果需要对外暴露 setup 中的数据和方法，需要使用 defineExpose AP

<script setup>
	import { defineExpose } from 'vue'
	const a = 1
	const b = 2
	defineExpose({
	    a
	})
</script>

4.属性和方法无需返回，直接使用

在以往的写法中，定义数据和方法，都需要在结尾 return 出去，才能在模板中使用。在 script setup 中，定义的属性和方法无需返回，可以直接使用

<template>
  <div>
   	<p>My name is {{name}}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('Sam')
</script>

二.Diff算法优化

Vue2使用了双端比较算法,Vue3使用了去头尾的最长递增子序列算法
Vue2中的虚拟DOM是进行全量的对比,Vue3的diff算法是在创建虚拟DOM的时候会根据DOM中的内容是否会发生变化，添加静态标记（静态标记值不同会有不同比较方法）

静态提升
Vue2中无论元素是否参加更新每次都会重新创建，然后渲染
Vue3中对于不参加更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可

cacheHandlers事件监听器缓存
默认情况下onClick会被设为动态绑定，所以每次都会区跟踪他的变化，但是因为是同一个函数，所有没有追踪变化，直接缓存起来复用即可

三.响应式数据的处理

Vue2中使用订阅发布模式结合Object.defineProperty实现响应式数据
Vue3中使用proxy和Reflect实现
解决了vue2中很多局限性：1、对属性的添加删除动作的检测 2、对数组基于下标的修改，对于length修改的检测 2、对接Map Set等的支持

a.Proxy

Proxy 是一个对象，它包装了另一个对象，并允许你拦截对该对象的任何交互。使用 Proxy 的一个难点是 this 绑定。我们希望任何方法都绑定到这个 Proxy，而不是目标对象，这样我们也可以拦截它们。使用ES6中的Reflect新特性可以实现

let obj  = {name:'lnj',age:18}
let state = new Proxy(obj,handler:{
         		get(target, property, receiver) {
    				return target[property]
				}
				set(target,property){
                    
                }
            })

b.Reflect

反射机制：反射机制指的是程序在运行时能够获取自身的信息

Reflect是一个内建的对象，用来提供方法去拦截JavaScript操作，他不是一个函数对象，不可构造。（与porxy handlers的方法相同）

let obj  = {name:'lnj',age:18}
let state = new Proxy(obj,handler:{
         		get(target, property, receiver) {
    				return Reflect.get(target, property, receiver)
				}
				set(target,property,value,receiver){
                    return Reflect.set(target, property,value,receiver)
                }
            })

新增了 ref、reactive、toRefs等api实现响应式

四.更小更快

删除了一些无用的api，打包渲染运行速度更快