一文看懂 vue3 中 setup() 和 ＜script setup＞＜script＞的区别_<script setup>_努力学前端的小 F 的博客 - CSDN 博客

setup ()

setup () 是 vue3 新增加的组件。vue3 采用了组合式 API ，为了使用组合式 API，我们需要一个入口，在 vue3 组件中，称之为 setup。

(简单点来说，就是 vue2 里面的 data，method，computed··· 全不要啦，所有数据方法全写在 setup 里)

来看一个简单的例子:

<template>
  <div class="box">
    <h1 style="text-align: center;">{{testData}}</h1>
  </div>
</template>
 
<script>
export default {
  setup () {
    const testData = 'hello world'
  return {
    testData
  }
  }
}
</script>

注意：在 setup() 中定义的数据，方法都需要 return 返回出去，不然会报错

再看一个调用方法的例子:

<template>
  <div class="box" style="margin: 0 auto;text-align: center;">
    <button @click="testFunciton">点我</button>
  </div>
</template>
 
<script>
export default {
  setup () {
    const testFunciton = function () {
      console.log('你点了我');
    }
  return {
    testFunciton
  }
  }
}
</script>

如何双向绑定数据请阅读官网的 ref,reactive,torefs 这里不详细讲解 vue3 的变化 (双向绑定，生命周期等)

setup () 函数应该有两个参数，props 和 contenxt 参数

第一个参数 props:

props 是一个对象，包含父组件传递给子组件的所有数据。

在子组件中使用 props 进行接收。包含配置声明并传入的所有的属性的对象

也就是说: 如果你想通过 props 的方式输出父组件传递给子组件的值。你需要使用 props 进行接收配置。即 props:{…}，如果你未通过 Props 进行接收配置，则输出的值是 undefined

看例子:

// 父组件
<template>
  <div class="box" style="margin: 0 auto;text-align: center;">
    <h1>我是父组件</h1>
  </div>
  <son :data="data"></son>
</template>
 
<script>
import son from './son.vue'
export default {
  components: {
    son
  },
  setup () {
      const data  = '父组件给子组件的数据'
  return {
    data
  }
  }
}
</script>

父组件传递了一个字符串 “父组件给子组件的数据” 给子组件，来看一下子组件不设置 props 的

// 子组件不带props
<template>
<div>
  <h2>{{data}}</h2>
</div>
</template>
<script>
export default {
  name: 'son',
  setup (props) {
  console.log('props>>>', props.data);
  return {
  }
    }
  }
</script>

 props 接收到的是 undefined， 再来看一下子组件带 props 的

// 子组件 带props
<template>
<div>
  <h2>{{data}}</h2>
</div>
</template>
<script>
export default {
  name: 'son',
  props:{
    data:{
        type:String
    }
},
  setup (props) {
  console.log('props>>>', props.data);
  return {
  }
    }
  }
</script>

第二个参数 context:

context 也是一个对象，里面有 attrs(获取当前标签上的所有属性的对象)，但是该属性是 props 中没有声明接收的所有的对象。如果你使用 props 去获取值，同时 props 中你声明了你要获取的值，则：获取的值是 undefined

看例子:

// 父组件 在子组件传递一个text
<template>
  <div class="box" style="margin: 0 auto;text-align: center;">
    <h1>我是父组件</h1>
  </div>
  <son :data="data" text="文本传输"></son>
</template>
 
<script>
import son from './son.vue'
export default {
  components: {
    son
  },
  setup () {
      const data  = '父组件给子组件的数据'
  return {
    data
  }
  }
}
</script>

// 子组件
<template>
<div>
  <h2>{{data}}</h2>
</div>
</template>
<script>
export default {
  name: 'son',
  props:{
    data:{
        type:String
    }
},
  setup (props, context) {
  console.log('props>>>', props.data);
  console.log('context>>>', context.attrs.text);
  return {
  }
    }
  }
</script>

子组件通过 context.attrs 属性获取

attrs 获取值是不需要 props 中没有声明接收 ，如果用 attrs 接收 props 中的值会显示 undefined

// 还是上面例子的数据，data是通过props传递的 
 console.log('contextTestProps>>>', context.attrs.data); 

 

<script setup> 其实是使用[组合式 API](https://v3.cn.vuejs.org/api/composition-api.html "组合式 API") 的编译时语法糖。相比于普通的 `<script>` 语法，它具有更多优势： * 更少的样板内容，更简洁的代码。 * 能够使用纯 Typescript 声明 props 和抛出事件。 * 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。 * 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作) (定义太复杂，来看看对比传统的 setup 的优势) ### 1. 属性和方法不需要返回，直接用 ``` <template> <div class="box" style="margin: 0 auto;text-align: center;"> <h1>{{data}}</h1> </div> </template> <script setup> const data = '语法糖真香'

![](https://img-blog.csdnimg.cn/1b997d160510452fabb48bfe59007218.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yqq5Yqb5a2m5YmN56uv55qE5bCPRg==,size_20,color_FFFFFF,t_70,g_se,x_16)

###  2. 组件不需要 components 注册

 不需要从 components 注册使用，直接 import 就可以用了 (香啊)

```

3. 组件数据传递 props 和 emit 语法改变

在传统 setup 中，上面演示到 props 需要用 setup(props) 接收，而在 setup 语法糖里，语法不同

props 和 emits 在语法糖中使用 defineProps  和 defineEmits 方法来使用：

来看 props 的例子:

// 父组件
<template>
  <div class="box" style="margin: 0 auto;text-align: center;">
    <h1>我是父组件</h1>
    <son :data="data"></son>
  </div>
</template>
<script setup>
import son from './son.vue'
const data = '传递给子组件'
</script>

// 子组件 这回不需要props接收了
<template>
<div>
  <h2>我是子组件---{{data}}</h2>
</div>
</template>
<script setup>
const props = defineProps ({
  data: {
    type: String
  }
})
console.log(props.data);
</script>

 来看**emits**的例子:

// 子组件
<template>
<div>
  <h2 @click="sendString">我是子组件 点我给父组件传"hello"</h2>
</div>
</template>
<script setup>
const emits = defineEmits(['sendEmit']);
const sendString = function () {
  emits('sendEmit', 'hello')
}
</script>

// 父组件
<template>
  <div class="box" style="margin: 0 auto;text-align: center;">
    <h1>我是父组件</h1>
    <son @sendEmit="sendEmit"></son>
  </div>
</template>
<script setup>
import son from './son.vue'
const sendEmit = function (s) {
  console.log(s);
}
</script>

4. 对外暴露属性

// 父组件 ```