【Vue3】setup、ref函数、reactive函数

目录

setup

setup的 两个注意点

ref函数

基本类型数据 

处理对象类型

reactive函数

reactive对比ref

---

setup

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对象中的属性。

举例： 

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 ，直接
  {{xxx}}
   。

备注：

• 接收的数据可以是基本类型，也可以是对象类型。
• 基本类型的数据：响应式依然是靠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

处理对象类型

 console.log(job.value)    

reactive函数

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

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

 

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

reactive对比ref

从定义数据角度对比：

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

从原理角度对比：

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

从使用角度对比：

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