VUE3

###### computed

```javascript
const computed1 = computed({
get(){
return count
},
set(){
console.log("1")
}
})
```

###### watch

```javascript
const count = ref(0)
const b = reactive({a:'dd',b:2,c:{a:9}})

var watch1= watch(count,(n,o)=>{
console.log("count发生改变:"+count)
})

var watch2= watch(b,(n,o)=>{
console.log("count发生改变:"n,o) 监视reactive的对象会强制开启deep，o值无法获取
},{deep:false}) deep不生效，监视b的属性对象就生效

var watch3 = watch(()=>b.c.a,(n,o)=>{
console.log(n,o) 监视的就是b.c.a
},{immediate:true}) 初次渲染组件就调用

var watch4 = watch([()=>{b.c.a},count],()=>{
..... 可监视数组
})
```

###### wathEffect

```javascript
watchEffect(()=>{
var c = count.value 用到count就会监视count
var a = b.c.a 监视b.c.a 整个回调会执行一遍
console.log("effect")
})
```

###### 钩子

```javascript
Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
beforeDestroy改名为 beforeUnmount
destroyed改名为 unmounted
Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
beforeCreate===>setup()

created=======>setup()

beforeMount ===>onBeforeMount

mounted=======>onMounted

beforeUpdate===>onBeforeUpdate

updated =======>onUpdated

beforeUnmount ==>onBeforeUnmount

unmounted =====>onUnmounted

```

###### hook函数

- 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。
- 类似于vue2.x中的mixin。

创建hook文件

```javascript
import {reactive,onMounted,onBeforeUnmount} from "vue";
export default function(){
let point= reactive({
y:0,
x:0
});

function getPoint(event){
point.y = event.pageY;
point.x = event.pageX;

}
onMounted(()=>{
window.addEventListener("click",getPoint)
});
onBeforeUnmount(()=>{
window.removeEventListener("click",getPoint)
})；
return point; 把数据返回出去
}
```

```javascript
import hook1 from '../hook' 导入

var point = hook1() 使用 得到数据

模板中使用数据
<p>{{point.x+","+point.y}}</p>
```