1.setup

　　 setup的两个传值 : 父传子 , 子传父 , 父后代

2.ref函数

isRef: 检查一个值是否为一个 ref 对象

　　 vue2和vue3响应式的原理(数据拦截)

3.reactive函数

isReactive: 检查一个对象是否是由
```
reactive
```
创建的响应式代理

ref与reactive的区别

从定义数据角度对比：
- ref用来定义： 基本类型数据 。
- reactive用来定义： 对象（或数组）类型数据 。
- 备注：ref也可以用来定义 对象（或数组）类型数据 , 它内部会自动通过
```
reactive
```
  转为 代理对象 。
从原理角度对比：
- ref通过
```
Object.defineProperty()
```
  的
```
get
```
  与
  set
  来实现响应式（数据劫持）。
- reactive通过使用 Proxy 来实现响应式（数据劫持）, 并通过 Reflect 操作 源对象 内部的数据。
从使用角度对比：
- ref定义的数据：操作数据需要
```
.value
```
  ，读取数据时模板中直接读取
  不需要
  .value
  。
- reactive定义的数据：操作数据与读取数据： 均不需要
```
.value
```
  。

4.计算属性

5.监视属性watch

6. watchEffect函数

7.生命周期

8.hook函数 [ 很重要 ]

9.toRef和toRefs

10.shallowReactive 和 shallowRef

11.readonly 和 shallowReadonly

isReadonly: 检查一个对象是否是由
```
readonly
```
创建的只读代理

12.toRaw和markRaw

13.customRef [ 实现防抖 ]

14.响应式数据做判断 :

isRef: 检查一个值是否为一个 ref 对象
isReactive: 检查一个对象是否是由
```
reactive
```
创建的响应式代理
isReadonly: 检查一个对象是否是由
```
readonly
```
创建的只读代理
isProxy: 检查一个对象是否是由
```
reactive
```
或者
```
readonly
```
方法创建的代理

15. Teleport

16. Suspense

全局API的转移

Vue 2.x 有许多全局 API 和配置。

例如：注册全局组件、注册全局指令等。

 //注册全局组件

Vue.component('MyButton', {

  data: () => ({

    count: 0

  }),

  template: '  <  button  @click  ="count++"  > Clicked {{ count }} times. </  button  >  '

})



//注册全局指令

Vue.directive('focus', {

  inserted: el => el.focus()

}

Vue3.0中对这些API做出了调整：

将全局的API，即：

Vue.xxx

调整到应用实例（

app

）上

2.x 全局 API（ `Vue` ）	3.x 实例 API ( `app` )
Vue.config.xxxx	app.config.xxxx
Vue.config.productionTip	移除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

2.其他改变

data选项应始终被声明为一个函数。

过度类名的更改：

Vue2.x写法

 .v-enter,

.v-leave-to {

  opacity: 0;

}

.v-leave,

.v-enter-to {

  opacity: 1;

}

Vue3.x写法

 .v-enter-from,

.v-leave-to {

  opacity: 0;

}



.v-leave-from,

.v-enter-to {

  opacity: 1;

}

移除 keyCode作为 v-on 的修饰符，同时也不再支持
```
config.keyCodes
```

移除

v-on.native

修饰符

父组件中绑定事件

 <  my-component  v-on:close  ="handleComponentEvent"  v-on:click  ="handleNativeClickEvent" 
 />

子组件中声明自定义事件

 <  script  >  export  default  {

    emits: [  '  close  '  ]

  }  </  script  >

移除过滤器（filter）

　　　　过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

vue3总结-组合式API