【Vue3】set up、ref函数、reactive函数

目录

set up

setup的 两个注意点

ref函数

基本类型数据 

处理对象类型

reactive函数

reactive对比ref

---

set up

1、理解：Vue3中的一个新的配置项，值为一个函数

2、setup是所有Composition API（组合API）的“表演舞台”

3、组件中所用到的数据、方法等等，都要配置到set up组件中

4、setup函数的两种返回值

1. 返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点关注）
2. 若返回一个渲染函数：则可以自定义渲染内容（了解）

5、注意点：

1、尽量不要与VUE2.X配置混用

• Vue2.x配置（data、method、computed..）可以访问到setup中的属性、方法
• 但在setup中不能访问的Vue2.x配置（data、method、computed..）
• 如果有重名，setup优先

2、setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。

举例： 

<template>
   <h1>我是APP组件</h1>
   <h2>姓名：{{name}}</h2>
   <h2>年龄：{{age}}</h2>  
   <button @click="sayHello">说话</button>
</template>
 
<script>
//import {h} from 'vue'
 
export default {
  name: 'App',
  setup(){
      //此处只是测试一下setup 暂时不考虑响应式的问题
      //数据
      let name = "张三"
      let age = 18
 
      //方法
      function sayHello(){
           alert (`我叫${name},我${age}岁了，你好啊！`)
       }
 
       //返回一个对象（常用）
       return {
        name,
        age,
        sayHello
       }
 
      //返回一个函数（渲染函数）
      //return ()=>h('h1','翘阳')
  }
}
</script>
 
<style>
 
</style>

setup的两个注意点

1、setup执行的时机

• 在beforeCreate之前就执行过一次，this就是undefined

2、setup的参数

props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性

context：上下文对象

• attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs
• slots：收到的插槽内容，相当于this.$slots
• emit：分发自定义事件的函数，相当于this.$emit 

ref函数

作用：定义一个响应式的数据

语法：const xxx =ref (initValue)

• 创建一个响应式数据的引用对象（reference对象，简称ref对象）。
• js中操作数据：xxx.value。
• 模板中读取数据：不需要.value ，直接<div>{{xxx}}</div> 。

备注：

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

基本类型数据 

  setup(){
      //数据
      let name = ref("张三")
      let age = ref(18)
 
      //方法
      function changeInfo(){
          
           console.log(name,age)
       }

 打印出的name和age：

Ref:reference引用      Impl:implement实现 

 后面的对象为引用实现的实例对象（引用对象）

 

 如下代码就可以实现响应式：数据的地方加上ref，方法加上value属性，上面的模板可以不用加.value

<template>
   <h1>我是APP组件</h1>
   <h2>姓名：{{name}}</h2>
   <h2>年龄：{{age}}</h2>  
   <button @click="changeInfo">修改信息</button>
</template>
 
<script>
import {ref} from 'vue'
 
export default {
  name: 'App',
  setup(){
      //数据
      let name = ref("张三")
      let age = ref(18)
 
      //方法
      function changeInfo(){
           name.value='李四'
           age.value=48
           //console.log(name,age)
       }
 
      //返回一个对象
      return {
        name,
        age,
        changeInfo
       }
 
  }
}
</script>
 
<style>
 
</style>

处理对象类型

 console.log(job.value)    

<template>
   <h1>我是APP组件</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.type = 'ui设计师'
           job.value.salary = '60K'
           //console.log(name,age)
       }
 
      //返回一个对象
      return {
        name,
        age,
        job,
        changeInfo
       }
 
  }
}
</script>
 
<style>
 
</style>

reactive函数

• 作用：定义一个对象类型的响应式数据（基本类型不用它，用ref函数）
• 语法： const 代理对象 = reactive(源对象)  接收一个对象（或数组），返回一个代理对象（proxy对象）
• reactive定义的响应式数据是“深层次的”
• 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

这次不用ref，用reactive函数，直接打印job，可以直接得到Proxy对象 

 

 也可以直接把这些数据放到一个对象里面，都用reactive函数，把所有的数据都放到了person对象里面，这样直接都用reactive函数，省去了使用.value的麻烦。

<template>
   <h1>我是APP组件</h1>
   <h2>姓名：{{person.name}}</h2>
   <h2>年龄：{{person.age}}</h2>  
   <h3>工作种类：{{person.job.type}}</h3>
   <h3>工作薪水：{{person.job.salary}}</h3>
   <button @click="changeInfo">修改信息</button>
</template>
 
<script>
import {reactive} from 'vue'
 
export default {
  name: 'App',
  setup(){
      //数据
      let person = reactive({
        name:"张三",
        age:18,
        job:{
          type:'前端工程师',
          salary:'30K'
        }
        
      })
      
 
      //方法
      function changeInfo(){
           person.name='李四'
           person.age=48
           person.job.type = 'ui设计师'
           person.job.salary = '60K'
          
       }
 
      //返回一个对象
      return {
        person,
        changeInfo
       }
 
  }
}
</script>
 
<style>
 
</style>

reactive对比ref

从定义数据角度对比：

• ref用来定义：基本数据类型
• reactive用来定义：对象（或数组）类型数据
• 备注：ref也可以定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象

从原理角度对比：

• ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）
• reactive通过Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据

从使用角度对比：

• ref定义的数据：操作的数据需要.value，读取数据时模板中直接读取不需要.value
• reactive定义的数据：操作数据与读取数据：均不需要.value