vue3新增特性setup()用法<与vue2对比>

文章目录

    • setup()
      • 执行时机
      • setup()的第一个形参props
      • setup()的第二个形参context
      • reactive()
        • 基本语法
        • 定义响应式数据供 template 使用
      • ref()
        • 基本语法
        • 在 template 中访问 ref 创建的响应式数据
        • 在 reactive 对象中访问 ref 创建的响应式数据
      • isRef()
      • toRefs()

setup()

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

执行时机

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

setup()的第一个形参props

父组件


子组件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">+1button>
  div>
template>

总结:

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

你可能感兴趣的:(前端,#,Vue3,vue.js,javascript,前端)