一文看懂vue3中setup()和 ＜script setup＞＜script＞的区别

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> 

<script setup> 其实是使用组合式 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 = '语法糖真香'
</script>

 2. 组件不需要components注册

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

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

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. 对外暴露属性

<script setup> 对外暴露属性需要使用defineExpose, 不需要导入 直接使用

看例子:

// 子组件
<template>
<div>
  <h2>我是子组件</h2>
</div>
</template>
<script setup>
import { ref } from 'vue'
let childText = ref('子组件数据')
defineExpose({
	childText,
});
</script>

// 父组件
<template>
  <div class="box" style="margin: 0 auto;text-align: center;">
    <h1 @click="printChildrenText">我是父组件--点我打印子组件值</h1>
    <son ref="sontext"></son>
  </div>
</template>
<script setup>
import son from './son.vue'
import { ref } from 'vue'
let sontext = ref(null)
const printChildrenText = function () {
  console.log(sontext.value.childText);
}
</script>