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

<template>
  <div>
    <h1>个人信息</h1>
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <button @click="sayHello">交流</button>
  </div>
</template>

<script>
  export default {
    name: 'App',
    //暂不考虑响应问题
    setup() {
      //数据
      let name = '空谷有来人'
      let age = 18

      // 方法
      function sayHello() {
        alert(`我是${name},我今年${age}岁了，你好啊！`)
      }

      //返回对象
      return {
        name,
        age,
        sayHello,
      }
    },
  }
</script>

ref函数

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

备注：

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

### App.vue

<template>
  <div>
    <h1>个人信息</h1>
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <h3>工作类型:{{ job.type }}</h3>
    <h3>工作薪水:{{ job.salary }}</h3>
    <button @click="changeInfo">更新信息</button>
  </div>
</template>

<script>
  import { ref } from 'vue'
  export default {
    name: 'App',
    //暂不考虑响应问题
    setup() {
      //数据
      let name = ref('空谷有来人')
      let age = ref(18)
      let job = ref({
        type: '前端工程师',
        salary: '20k',
      })

      function changeInfo() {
        name.value = '张三'
        age.value = 20
        job.value.type = '后端工程师'
        job.value.salary = '30k'
      }
      //返回对象
      return {
        name,
        age,
        job,
        changeInfo,
      }
    },
  }
</script>

reactive函数

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

### App.vue


<template>
  <div>
    <h1>个人信息</h1>
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <h3>工作类型:{{ job.type }}</h3>
    <h3>工作薪水:{{ job.salary }}</h3>
    <button @click="changeInfo">更新信息</button>
  </div>
</template>

<script>
  import { ref, reactive } from 'vue'
  export default {
    name: 'App',
    //暂不考虑响应问题
    setup() {
      //数据
      let name = ref('空谷有来人')
      let age = ref(18)
      let job = reactive({
        type: '前端工程师',
        salary: '20k',
      })

      function changeInfo() {
        name.value = '张三'
        age.value = 20
        job.type = '后端工程师'
        job.salary = '30k'
      }
      //返回对象
      return {
        name,
        age,
        job,
        changeInfo,
      }
    },
  }
</script>

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

<template>
  <div>
    <h1>个人信息</h1>
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <hr>
    <h2>当前的坐标为：x：{{point.x}},y：{{ point.y }}</h2>
  </div>
</template>

<script>
  import { ref } from 'vue'
  import usePoint from '../hooks/usePoint'
  export default {
    name: 'DemoName',
    //暂不考虑响应问题
    setup() {
      //数据
      let name = ref('空谷有来人')
      let age = ref(18)

      let point = usePoint()

      //返回对象
      return {
        name,
        age,
        point,
      }
    },
  }
</script>

### 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第一弹的学习就到这了。

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