vue3中的单文件组件＜script setup＞和setup函数区别 详解（一）

setup函数原理说明
由于setup 是在beforeCreate 和 create 生命周期阶段，组件还没有创建，即还没有进入 data 方法 阶段。
setup 返回的结果集 作为 (传统写法)data 和 method 的值，确切点说是绑定到 组件对象的属性。

<script setup>
console.log('hello script setup')
</script>

**使用setup函数**

<template>
  <div>{{ num }}</div>
</template>
<script>
import { ref } from "vue";
export default {
  name: "Home",
  setup() {
    const num = ref("setup函数形式");
    return { num };
  },
};
</script>

**使用＜script setup＞**

<template>
  <div>{{ num }}</div>
</template>
<script setup>
import { ref } from "vue";
const num = ref(10784512);
</script>

使用setup函数形式

<template>
  <div>
    <Child></Child>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default{
  components:{
    Child
  }
}
</script>

使用setup语法糖形式

<template>
  <div>
    <Child></Child>
  </div>
</template>
<script setup>
import Child from "./Child.vue";
</script>

<template>
  <component :is="someCondition ? Child : ToRef" />
</template>
<script setup>
import {ref} from 'vue'
import Child from "./Child.vue";
import ToRef from "./Toref.vue";
const someCondition=ref('1')
</script>

setup函数形式

<template>
  <div class="home">
    <h1>使用了setup函数</h1>
    <h2> {{lowercase1(name)}}</h2>
  </div>
</template>
<script>
import { ref } from 'vue'
import { lowercase } from '@/utils/lowercase.js'
export default {
  setup () {
    const name = ref('MYNAME')
    const lowercase1 = lowercase
    return { name, lowercase1 }
  }
}
</script>

setup语法糖形式

<template>
  <div class="about">
    <h1>使用了script setup</h1>
    <h2>1.使用变量 {{lowercase(name)}}</h2>
  </div>
</template>
<script setup>
import { lowercase } from '@/utils/lowercase.js'
import { ref } from 'vue'
const name = ref('MYNAME')
</script>

setup函数形式

<!-- 父组件 -->
<template>
  <div class="demo">
    我是script setup的父组件
    <hr />
    <Child :list="list" :msg="msg" @change="handleChange"></Child>
  </div>
</template>
<script>
import { ref, defineProps, reactive } from "vue";
import Child from "./Child.vue";
export default {
  components: { Child },
  setup() {
    let list = ref("张三");
    let msg = ref("123");
    const handleChange = (e) => {
      console.log(e);
    };
    return {
      list,
      msg,
      handleChange,
    };
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h3>我是子级组件</h3>
    <h4>我接收到父组件的 数据 => {{ list }}</h4>
    <hr />
    <button @click="handleClick">子组件传值到父组件</button>
  </div>
</template>
<script>
import { onMounted } from 'vue';
export default {
  props: {
    // 注意：父组件传到子组件的字段必须要在这里定义
    list: String,
  },
  setup(props, context) {
    /**
    props:
    content中有四个参数：
      1、attrs: 该参数接受的是父组件传值到子组件的时候，子组件中未在props中配置的值;
      2、emit: 该参数作为子父组件传值使用，传递给父组件需要使用到该字段;
  */
    console.log( context.attrs, "12");  //打印attrs 查看其他未定义接收的变量
    const handleClick = () => {
      context.emit("change", "来自子组件的消息");   //子传父方法：emit(‘自定义事件名称’,'传递的参数')
    };
    return {
      props,
      handleClick,
    };
  },
};
</script>

setup语法糖

<!-- 父组件 -->
<template>
  <div class="demo">
    我是script setup的父组件
    <hr>
    <!-- 子组件的内容在父组件显示 -->
    <Child :list="list"></Child> 
  </div>
</template>
<script setup>
import {ref, onMounted, reactive } from 'vue';
import Child from "./Child.vue";
const list = reactive([{name: 'zl'}])  
</script>

<!-- 子组件 -->
<template>
  <div class="demo">
    <div>我是script setup子组件 :{{ props.list[0].name }}</div>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
// 子组件中， 接收 Props 参数 Vue 提供了一个 新的 API 函数 defineProps()方法，就和我们在 Vue2 的子组件中 定义 Props 待接收参数配置一样。
// 必须要使用defineProps进行配置传入的属性，否则无法获取到传入的值.
const props = defineProps({
  list: {
    type: Array,
    required: true, //  是否必传
    default: "备用数据", //默认数据
  },
});
onMounted(() => {
  console.log(props.list, "123");
});
</script>