setup函数相关【3】

目录

• 1.setup函数：
• • • 1.概述：
    • 2.案例分析：
• 2.setup函数的优化：（setup语法糖）
• • • 优化1：
    • 优化2：
    • • 安装插件：
      • • 安装指令：只对当前项目安装
        • 配置vite.config.ts：
      • 代码编写：

1.setup函数：

1.概述：

• setup 是Vue3中一个新的配置项,他是一个函数，是组合式API的舞台，组件中所用到的 数据 方法 计算属性 监视属性等都在setup函数中；
• setup 函数中 返回的对象中的内容，可以在模板中直接使用；
• setup 函数中的this 是undefined，因此在setup函数中不使用this；
• setup 函数 会beforeCreate之前调用，领先所有的钩子执行的；

2.案例分析：

   在vue3开始学习的时候我们搭建了一个简单的vue项目，但实际上我们是通过vue2语法来编写的，也就是将数据放置在data属性中，方法放置在methods属性中这种分散的语法；

  在vue3中我们将这些数据，方法等全部放置在setup函数中；

<template>
  <h2>名称：{{ name }}</h2>
  <h2 v-text="'地址：'+address"></h2>
  <button @click="changeName">更新名称</button>
</template>

<script>
export default {
  name: "School",
  setup() {
    console.log("setup函数执行了")
    //声明(默认是 非响应式的) 变量  并 赋值
    let name = "猿究院";
    let address = "北大街";
    //不能使用this 是 undefined
    // console.log(this)

    // function changeName() {}
    const changeName = () => {
      console.log("更新name属性:", name);
      name += "~";
    }

    return {
      //返回变量  可以在模板中直接使用
      name, address, changeName
    }

  },
  beforeCreate() {
    console.log("生命周期函数 beforeCreate")
  }
}


</script>

<style scoped>

</style> 

<template>
<School></School>
</template>

<script>

import School from "./School.vue"
export default {
  name: "App",
  components: {School}
}
</script>

<style scoped>

</style>

说明：在上述案例的school.vue组件中，我们将此组件的数据，及事件的回调函数全部写到了setup函数中，并将数据和回调函数写到了setup函数的return属性中，注意，setup函数中的数据及方法必须在return中返回，才能在模板中直接使用；

通过测试结果发现，可以正常将数据渲染到页面上，但同时也存在两个问题：

• setup函数书写过于繁琐，在此函数中需要被渲染的数据必须在return中返回才可使用；
• setup函数中的方法默认是非响应式的，也就是说案例中的改变名称函数虽然会实际修改属性的值，但不会将修改后的值渲染到页面上；

通过测试结果可以看出，name属性的值确实被改变了，但却并未渲染到页面上；

2.setup函数的优化：（setup语法糖）

优化1：

<template>
  <h2>名称：{{ name }}</h2>
  <h2 v-text="'地址：'+address"></h2>
  <button @click="changeName">更新名称</button>
</template>

<!-- script setup用于主要逻辑 -->
<script lang="ts" setup>

const name = '猿究院';
const address = '北大街';

// 定义函数
const changeName = () => {
  console.log("更新name属性:", name.value);
  name.value += '~';
};
</script>

<!-- 普通script用于定义组件相关属性等 -->
<script lang="ts">
export default {
  name: 'School'
};
</script>

<style scoped>

</style>  

通过上述setup语法糖优化后，需要渲染到页面的数据不用再写到return中返回后才可使用了；

此时仍可以在页面上获取到相应的值，但此时的值仍是非响应式的，而且优化后需要写两个script编写，所以仍然需要进一步优化；

优化2：

可以安装一个vite插件，就可以将两个script标签进行合并了

安装插件：

安装指令：只对当前项目安装

npm i vite-plugin-vue-setup-extend -D 

配置vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//导入插件
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
// https://vite.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      //使用插件
    vueSetupExtend()

  ],
}) 

代码编写：

<template>
  <h2>名称：{{ name }}</h2>
  <h2 v-text="'地址：'+address"></h2>
  <button @click="changeName">更新名称</button>
</template>

<!--setup  语法糖-->
<script lang="ts" setup name="School">

let name = "猿究院";
let address = "北大街";
const changeName = () => {
  console.log("更新name属性:", name);
  name += '~'
}
</script>

<style scoped>

</style> 

<template>
  <School></School>
</template>

<script setup lang="ts" name="App">

import School from "./components/School.vue";

</script>

<style scoped>

</style>

上面优化案例中，我们合并了两个script标签，并且实现了数据的正常渲染；

但此时的数据仍然是非响应式的，修改数据，还是不会同步渲染到页面上，因此还需要进行优化；