vue3,你看setup设计详解,也是个人才

js 复制代码
setup

基本使用
访问Props
Setup 上下文
与渲染函数一起使用

基本使用

js 复制代码
<script setup> 这种语法。

响应式API:在setup()函数 返回的对象, 会暴露给 模板和组件实例。

js 复制代码
<script>
export default {
  setup() {
    const count = ref(0)
    
    // 返回值会暴露给模版和其他的选项式 API 钩子
    return {
      count // 自动浅层解包 在模版中就不需要再写.value this问也无需写
    }
  },
  
  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

async setupSuspense组件的后裔。

访问Props

setup函数的第一参数是props

setup函数的props是响应式的,并且传入新的props时 同时更新

js 复制代码
export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

解构props对象去用,达咩,解构出的变量会丢失响应式。用props.xxx去用其中的porps
如果,确实,要解构props对象。 或者要将某个prop传到一个外部函数中并保持响应性,那么你可以使用toRefs()toRef()这两个工具函数:

js 复制代码
import { toRefs, } from 'vue'

export default {
  setup(props) {
    // 将`props`转为一个其中全是ref的对象,然后解构
    const { title } = toRefs(props)
    
    // `title`是一个追踪着`props.title`的ref
    console.log(title.value)
    
    // 或者,将`props`的单个属性转为一个ref
    const title = toRef(props, 'title')
  }
}

Setup 上下文

第二个参数是上下文 context

js 复制代码
export default {
  setup(props, context) {
    // 透传 Attributes (非响应式的对象,等价于 $attrs)
    console.log(context.attrs)
    
    // 插槽(非响应式的对象,等价于 $slots)
    console.log(context.slots)
    
    // 触发事件(函数,等价于 $emit)
    console.log(context.emit)
    
    // 暴露公共属性(函数)
    console.log(context.expose)
  }
}

该 上下文 对象 是 非响应式的,可以安全地解构:

js 复制代码
export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

attrs 和 slots 都是有状态的对象,它们总是会随着组件自身的更新而更新。

这意味着你应当避免解构它们,并始终通过 attrs.x 或 slots.x 的形式使用其中的属性。

此外还需注意,和 props 不同,attrs 和 slots 的属性都不是响应式的。

如果你想要基于 attrs 或 slots 的改变来执行副作用,那么你应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。

暴露公共属性

expose函数用于显式地限制该组件暴露出的属性,

js 复制代码
export default {
  setup(props, { expose }) {
    // 让组件实例处于"关闭状态"
    // 即不向父组件暴露任何都你先
    expose()
    
    const publicCount = ref(0)
    const privateCount = ref(0)
    
    // 有选择地暴露局部状态
    expose({ count: publicCount })
  }
}

与渲染函数一起使用

setup也可以返回一个渲染函数

可以用同一作用域下 声明的 响应式状态:

js 复制代码
import { h, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return (0 => h('div', count.value)
  }
}

通过expose暴露方法给父组件(父组件可以通过模版引用 去访问 这个 increment方法):

js 复制代码
import { h, ref } from 'vue'

export default {
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value
    
    expose({
      increment
    })

    return () => h('div', count.value)
  }
}
相关推荐
新手小新7 分钟前
C++游戏开发(2)
开发语言·前端·c++
我不吃饼干33 分钟前
【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP
前端·typescript·trae
小杨同学yx2 小时前
前端三剑客之Css---day3
前端·css
Mintopia3 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九3 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
Mintopia4 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb1894 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
烛阴5 小时前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript
Entropy-Lee5 小时前
JavaScript 语句和函数
开发语言·前端·javascript
Wcowin6 小时前
MkDocs文档日期插件【推荐】
前端·mkdocs