一、VUE3——setup、ref、reactive理解

---

一、Vue3 改变

1、性能提升

（1）打包大小减少41%
（2）初次渲染快55%，更新渲染快133%
（3）内存减少54%

2、源码的升级

（1）使用Proxy代替defineProperty实现响应式
（2）重写虚拟DOM的实现和Tree-Shaking

3、拥抱TypeScript

Vue3可以更好地支持TypeScript

二、setup 使用

<template>
  <h1>信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <button @click="sayHello">speak</button>
</template>

<script>
export default{
  name:'App',
  // 测试setup，不考虑响应式
  setup(){
    // 数据
    let name='张三'
    let age=18

    // 方法
    function sayHello(){
      alert(`${name},${age}`)
    }

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

1、注意点一

尽量不要与vue2.x配置混用，vue2.x配置（data、methods、computed）中可以访问到setup中的属性、方法。但在setup中不能访问到vue2.x配置（data、methods、computed）。如果有重名，setup优先。

2、注意点二

setup不能是一个async函数，因为返回值不再是return对象，而是promise。

三、ref 函数

<template>
  <h1>个人信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h3>工作种类：{{job.type}}</h3>
  <h3>工资：{{job.salary}}</h3>
  <button @click="changeInfo">修改个人信息</button>
</template>

<script>
import{ref}from 'vue'
export default{
  name:'App',
  setup(){
    // 数据
    let name=ref('张三')
    let age=ref(18)
    let job=ref({
      type:'工程师',
      salary:'30k'
    })

    // 方法
    function changeInfo(){
      name.value='李四'
      age.value=48,
      job.value.salary='10k',
      job.value.type='测试'
    }

    // 返回一个对象
    return{
      name,
      age,
      job,
      changeInfo
    }
  }
}
</script>

1、作用

定义一个响应式的数据

2、语法

const xxx=ref(initValue)
创建一个包含响应式数据的引用对象（ref对象）
JS中操作数据：xxx.value
模板中操作数据：不需要.value，直接：{{xxx}}

3、接收的数据

接收的数据可以是基本类型也可以是对象类型。
基本类型的数据：响应式依然是靠object.defineProperty()的get与set完成的。
对象类型的数据：内部使用了vue3中的一个新函数——reactive函数。

四、reactive 函数

<template>
  <h1>个人信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h3>工作种类：{{job.type}}</h3>
  <h3>工资：{{job.salary}}</h3>
  <h3>爱好：{{hobby}}</h3>
  <button @click="changeInfo">修改个人信息</button>
</template>

<script>
import{ref,reactive}from 'vue'
export default{
  name:'App',
  setup(){
    // 数据
    let name=ref('张三')
    let age=ref(18)
    let job=reactive({
      type:'工程师',
      salary:'30k'
    })
    let hobby=reactive(['看书','音乐','游戏'])

    // 方法
    function changeInfo(){
      name.value='李四'
      age.value=48,
      job.value.salary='10k',
      job.value.type='测试',
      hobby[0]='学习'
    }

    // 返回一个对象
    return{
      name,
      age,
      job,
      hobby,
      changeInfo
    }
  }
}
</script>

1、作用

定义一个对象类型的响应式数据（基本数据类型不用，要用ref函数）

2、语法

const 代理对象=reactive(源对象)，接收一个对象（或数组），返回一个代理对象（proxy对象）

3、实现原理

reactive定义的响应式数据是深层次的，内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。