Vue：（三十六）Vue3.0第一弹

Vue2.x中的基础知识基本就告一段落了，接下来就快速的把Vue3.0中的相关改动内容过一遍。

setup

1. 理解：Vue3.0中的一个新的配置项，值为一个函数
2. 组件中用到的：数据、方法等等，均要配置在setup中
3. setup有两种返回值：
   1. 若返回一个对象，则对象中的属相、方法，在模版中均可直接使用（常用）
   2. 若返回一个渲染函数，则可以自定义渲染内容（了解）
4. 注意点：
   1. 尽量不要与Vue2.x配置混用
      1. Vue2.x配置（data、methods、computed...）中可以访问到setup中的配置、方法
      2. 如果有重名，setup优先
      3. 但在setup中不能访问到Vue2.x配置（data、methods、computed...）
5. setup不能是一个async函数，因为返回值不再是一个return的对象，而是promise，模版看不到return对象中的属性

### App.vue

ref函数

1. 作用：定义一个响应式函数
2. 语法：const xxx = ref(initVlue)
   1. 创建一个包含响应式数据的引用对象（reference对象）
   2. JS中操作数据：xxx.value
   3. 模版中读取数据：不需要value，直接
      {{xxxx}}

备注：

• 接收的数据可以是：基本类型、也可以是对象类型
• 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的
• 对象类型数据：内部求助了Vue3.0中的一个函数：reactive函数

### App.vue

reactive函数

1. 作用：定义一个对象类型的响应式函数（基本类型不能用）
2. 语法：const代理对象=reactive（源对象）接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称Proxy对象）
3. reactive定义的响应式数据是深层次的
4. 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

### App.vue

watchEffect函数

1. 不用指明监视哪个属性，监视的回调中用哪个属性，就监视哪个属性
2. watchEffect有点像computed：
   1. 但是computed注重的是计算出来的值（回调函数的返回值），所以必须要写返回值
   2. 而watchEffect更注重的是过程（回滚函数的函数体），所以不用写返回值

watchEffect(()=>{
	const x1 = sum.value
    const x2 = person.age
})

自定义hook函数

1. 本质是一个函数，把setup函数中使用的Composition API进行了封装
2. 类似于Vue2.x中的mixin
3. 优势：复用代码，让setup中的逻辑更清楚

### Demo.vue

### usePoint.js


import { reactive, onMounted, onBeforeUnmount } from 'vue'

export default function () {
  let point = reactive({
    x: 0,
    y: 0,
  })

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

  onMounted(() => {
    window.addEventListener('click', getPoint)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('click', getPoint)
  })

  return point
}

Vue3.0第一弹的学习就到这了。

我是空谷有来人，谢谢支持。