[JavaScript知识库]vue3新增特性setup()用法＜与vue2对比＞

setup()

setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。

执行时机

setup 函数会在 beforeCreate 之后、created 之前执行

setup()的第一个形参props

父组件

<set-up p1="aaaa"></set-up>

子组件set-up

// 在props中定义当前组件允许外界传递过来的参数名称：
props: {
  p1: String
}，
// 通过setup函数的第一个形参，接收props数据：
setup(props) {
    console.log(props.p1)
}

在vue2中子组件是这样写

props: {
  p1: String
}
// 为了让p1不仅可读，还可写，赋值给data
data(){
  return{
  	p1:this.p1
  }
}

区别就是vue3将data和props的数据都写在了一起

setup()的第二个形参context

setup 函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中，它们的访问方式如下：

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }
}

注意：在 setup() 函数中无法访问到 this

reactive()

reactive() 函数接收一个普通对象，返回一个响应式的数据对象。

基本语法

等价于 vue 2.x 中的 Vue.observable() 函数，vue 3.x 中提供了 reactive() 函数，用来创建响应式的数据对象，基本代码示例如下：

import { reactive } from '@vue/composition-api'

// 创建响应式数据对象，得到的 state 类似于 vue 2.x 中 data() 返回的响应式对象
const state = reactive({ count: 0 })

定义响应式数据供 template 使用

1. 按需导入 reactive 函数：

   import { reactive } from 'vue'
   

2. 在 setup() 函数中调用 reactive() 函数，创建响应式数据对象：

   setup() {
        // 创建响应式数据对象
       const state = reactive({count: 0})
        // setup 函数中将响应式数据对象 return 出去，供 template 使用
       return state
   }
   

   注意：必须return才能在界面上用，reactive()里面必须是对象

3. 在 template 中访问响应式数据：

   <p>当前的 count 值为：{{count}}</p>
   

vue2的响应式则相对简单，直接在data中定义即可

ref()

基本语法

ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性：

import { ref } from 'vue'

// 创建响应式数据对象 count，初始值为 0
const count = ref(0)

// 如果要访问 ref() 创建出来的响应式数据对象的值，必须通过 .value 属性才可以
console.log(count.value) // 输出 0
// 让 count 的值 +1
count.value++
// 再次打印 count 的值
console.log(count.value) // 输出 1

在 template 中访问 ref 创建的响应式数据

1. 在 setup() 中创建响应式数据：

   import { ref } from 'vue'
   
   setup() {
       const count = ref(0)
   
        return {
            count,
            name: ref('zs')
        }
   }
   

2. 在 template 中访问响应式数据：

   <template>
     <p>{{count}} --- {{name}}</p>
   </template>
   

在 reactive 对象中访问 ref 创建的响应式数据

当把 ref() 创建出来的响应式数据对象，挂载到 reactive() 上时，会自动把响应式数据对象展开为原始的值，不需通过 .value 就可以直接被访问，例如：

const count = ref(0)
const state = reactive({
  count
})

console.log(state.count) // 输出 0
state.count++ // 此处不需要通过 .value 就能直接访问原始值
console.log(count) // 输出 1

注意：新的 ref 会覆盖旧的 ref，示例代码如下：

// 创建 ref 并挂载到 reactive 中
const c1 = ref(0)
const state = reactive({
  c1
})

// 再次创建 ref，命名为 c2
const c2 = ref(9)
// 将 旧 ref c1 替换为 新 ref c2
state.c1 = c2
state.c1++

console.log(state.c1) // 输出 10
console.log(c2.value) // 输出 10
console.log(c1.value) // 输出 0

isRef()

isRef() 用来判断某个值是否为 ref() 创建出来的对象；应用场景：当需要展开某个可能为 ref() 创建出来的值的时候，例如：

import { isRef } from '@vue/composition-api'
const unwrapped = isRef(foo) ? foo.value : foo

toRefs()

toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据，最常见的应用场景如下：

import { toRefs } from 'vue'

setup() {
    // 定义响应式数据对象
    const state = reactive({
      count: 0
    })

    // 定义页面上可用的事件处理函数
    const increment = () => {
      state.count++
    }

    // 在 setup 中返回一个对象供页面使用
    // 这个对象中可以包含响应式的数据，也可以包含事件处理函数
    return {
      // 将state上的每个属性，都转化为ref形式的响应式数据
      // ...是展开运算符
      ...toRefs(state),
      // 自增的事件处理函数
      increment
    }
}

页面上可以直接访问 setup() 中 return 出来的响应式数据：

<template>
  <div>
    <p>当前的count值为：{{count}}</p>
    <button @click="increment">+1</button>
  </div>
</template>

总结：

• setup(props,context)，props用来接收组件传来的内容，context用来代替setup()里的this
• reactive()用来接收一个对象，用于创建响应式数据对象，必须要return出去；（不建议使用）
  • 使用的是接收对象里的属性
• ref()用来接收一个值，用于创建响应式数据对象，返回的是一个对象，必须要return出去。
  • 在setup()内需通过 .value 就可以直接被访问；
  • 但是在template中会自动解析，不需要 .value ;
  • reactive对象中访问ref创建的响应式数据，也不需要.value；ref的对象会直接变成reactive的属性
  • 新的 ref 会覆盖旧的 ref

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖