setup

setup

setup概述

​ setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。

特点如下：

• setup函数返回的对象中的内容，可直接在模板中使用。
• setup中访问this是undefined。
• setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

参考代码：

<script lang="ts">
  //这里以下是vue2的语法
  export default {
    name: 'Person',
    beforeCreate() {
      console.log("beforeCreate", "执行");
    },
    setup() {
      console.log("setup", "执行");
      // console.log("查看对应setup中的this是: ", this);  //可以看到对应的this是unidefined Vue3中已经开始弱化this了
 
      //######  数据（原本写在data中）  ######
      let name = '张三';    //注意此时的的name不是响应式的
      let age = 18;         //注意此时的的age不是响应式的
      let tel = '18888888888' //tel 我们的设计只是查看，所以是不是响应式的无所谓
 
      //######  方法（原本写在methods中） ######
      function changeName() {
        name = '李四';
        console.log(name);    //name 改了但是其不是响应式的
      }
 
      function changeAge() {
        age += 1;
        console.log(age);     //age 改了但是其不是响应式的
      }
 
      function showTel() {
        alert(tel);
      }
 
      // return {name:name, age:age}  //同名可以进行简写
      return {name, age, changeName, changeAge, showTel} //最后需要通过这一句话把定义的变量和方法交出去
    }
  }
</script>

setup返回值

​ 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用（重点关注）。

​ 若返回一个函数：则可以自定义渲染内容，代码如下：

<script lang="ts">
  //这里以下是vue2的语法
  export default {
    name: 'Person',
    beforeCreate() {
      console.log("beforeCreate", "执行");
    },
    setup() {
      console.log("setup", "执行");
      return () => '你好世界'  //setup的返回时也可以是一个渲染函数
    }
  }
</script>

setup与OptionsAPI

​ 首先他们是可以共存的。

​ Vue2 的配置（data、methos......）中可以访问到 setup中的属性、方法

​ 但在setup中不能访问到Vue2的配置（data、methos......）。

​ 如果与Vue2冲突，则setup优先。

<script lang="ts">
  //这里以下是vue2的语法
  export default {
    name: 'Person',
    beforeCreate() {
      console.log("beforeCreate", "执行");
    },
    data() {
      return {
        a: 100,
        b: this.name  //可以通过this读取到setup中的数据
      }
    },
    methods: {
      test() {
        alert('测试')
      }
    },
    setup() {
      console.log("setup", "执行");
      //######  数据（原本写在data中）  ######
      let name = '张三';    
      let age = 18;         
      let tel = '18888888888' 
 
      //######  方法（原本写在methods中） ######
      function changeName() {
        name = '李四';
        console.log(name);    
      }
 
      function changeAge() {
        age += 1;
        console.log(age);    
      }
 
      function showTel() {
        alert(tel);
      }
 
      return {name, age, changeName, changeAge, showTel}
    }
  }
</script>

setup的语法糖

参考语法糖写法

​ 目前我们定义的数据还不是响应式的。

<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>
 
<script lang="ts">
  export default {
    name: 'Person'  //用于配置组件名，否则组件名就是文件名
  }
</script>
 
<script setup lang="ts">
  //######  数据（原本写在data中）  ######
  let name = "张三";
  let age = 18;
  let tel = "18888888888";
 
  //######  方法（原本写在methods中） ######
  function changeName() {
    name = "李四";
    console.log(name);
  }
 
  function changeAge() {
    age += 1;
    console.log(age);
  }
 
  function showTel() {
    alert(tel);
  }
</script>
 
<style>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px; /* 盒子阴影 */
  border-radius: 10px;
  padding: 20px;
}
 
button {
  margin: 0 5px;
}
</style>

插件简化组件命名

​ 为了对应组件命名的灵活性，上面我们编写了两个script 一个用于编写组合式写法，一个用于编写组件名，这里我们可以通过插件的方式进行简化操作。

1、插件安装：

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

2、vite.config.ts中配置

import vueSetupExtend from 'vite-plugin-vue-setup-extend'		//导入插件
 
export default defineConfig({
  plugins: [ 
      //...已有的插件
      vueSetupExtend()	//在已有的基础上添加插件
  ]
})

3、在代码中使用

<script setup lang="ts" name="Person234">	//就可以只用写一个，加一个name参数即可

4、参考代码：

<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>
 
<script setup lang="ts" name="Person234">
  //######  数据（原本写在data中）  ######
  let name = "张三";
  let age = 18;
  let tel = "18888888888";
 
  //######  方法（原本写在methods中） ######
  function changeName() {
    name = "李四";
    console.log(name);
  }
 
  function changeAge() {
    age += 1;
    console.log(age);
  }
 
  function showTel() {
    alert(tel);
  }
</script>
 
<style>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px; /* 盒子阴影 */
  border-radius: 10px;
  padding: 20px;
}
 
button {
  margin: 0 5px;
}
</style>