最新版vue3+TypeScript开发入门到实战教程之学会vue3第一步必是setup语法糖

setup 概述

在vue3中，若没有学好setup函数，后面学习vue3将会越学越乱。 setup是一个函数，它在vue3是一个新的配置项，是组合式语法 (Composition API)表演的舞台，组件中所用的属性、计算属性、方法、监视等等，均需要在setup中配置。 setup特性：

• setup函数中没有this，它是undefined
• setup函数返回的对象内容，可直接在模版中调用
• setup函数在beforeCreate之前调用，领先所有生命周期钩子。

最简单setup事例语法

上节 vue3与vue2语法优劣对比中，vue2语法是选项式（OptionsAPI），如下图： 既然vue3是组合式语法 (Composition API)，它就不应该有data，methods，而是所有内容都合并在一起，删除data与methos，建立setup函数，定义数据与方法，流程如下

• 删除data内容
• 删除methos内容
• 创建setup函数
• 在setup函数中定义变量与方法
• setup函数要返回数据与方法供模版使用

<template>
  <div class="car">
    <h2>品牌:{{ name }}</h2>
    <h2>价格:{{ price }}万</h2>
    <button @click="changeName">修改品牌</button>
    <button @click="changePrice">修改价格</button>
    <button @click="showLowPrice">查看低价</button>

  </div>
</template>
<script lang="ts">
export default{
  name: 'Car',
  setup() {
    console.log(this)
    let name = '奔驰';
    let price = 100;
    let lowPrice = 80;
    function changeName() {
      name = '宝马'
      console.log(name)

    }
    function changePrice() {
      price += 10;
      console.log(price)

    }
    function showLowPrice() {
      alert(lowPrice);
    }
    return { name, price, changeName, changePrice, showLowPrice }
  }
}
</script>

浏览器输入，效果如下：

• 首次打开页面，控制台首先输出this为undefined，setup没有this
• 页面能够渲染品牌与价格
• 点击修改品牌，name值能够修改，但页面没有变化
• 点击修改价格，price值能够修改，但页面没有变化
• 点击查看低价，控制台正确输出 在vue2中data定义的数据是响应式数据，但在vue3这种方式定义的数据不是响应式。在vue3中有五中类型的响应式数据。在下期细讲明，避免与setup知识点理解不清，暂不提及。name、price、lowPrice都不是响应式数据。

setup与data、methods常常被问到面试题

在vue组件中，常常有人将vue2语法与vue3语法混着写，既在data定义数据，又在setup定义数据。当使用函数访问数据中，问题出现。setup数据能否访问data数据，反之亦能否？页面属性与方法非常混乱，所以在vue3中，不要去写vue2语法，实在搞不定再去写。

• setup与data、methods可以共存
• data、methods能访问setup数据与方法
• setup不能访问data中的数据与方法

setup与data、methods可以共存

继上面的事例，给car新增一个color颜色属性，用vue2语法编写

<template>
  <div class="car">
    <h2>品牌:{{ name }}</h2>
    <h2>价格:{{ price }}万</h2>
    <h2>颜色：{{ color }}</h2>
    <button @click="changeName">修改品牌</button>
    <button @click="changePrice">修改价格</button>
    <button @click="showLowPrice">查看低价</button>
    <button @click="changeColor">修改颜色</button>

  </div>
</template>
<script lang="ts">
export default{
  name: 'Car',
  data() {
    return {
      color:'红色'
    }
  },
  methods: {
    changeColor() {
      this.color='蓝色'
    }
  },
  setup() {
    let name = '奔驰';
    let price = 100;
    let lowPrice = 80;
    function changeName() {
      name = '宝马'
      console.log(name)

    }
    function changePrice() {
      price += 10;
      console.log(price)

    }
    function showLowPrice() {
      console.log(lowPrice)

    }
    return { name, price, changeName, changePrice, showLowPrice }
  }
}
</script>

在浏览器访问，发现可以共存，且color是响应式数据。如图：

data、methods能访问setup数据与方法

在data中修改color默认赋值为name+'color'，修改methods函数changeColor，让它访问name属性，调用修改价格函数

 data() {
    return {
      color:name+'color'
    }
  },
  methods: {
    changeColor() {
      this.color = '蓝色'
      console.log(this.name);
      this.changePrice();
    }
  },

在浏览器访问，效果如下图

• 属性颜色，显示奔驰红色
• 修改颜色函数，控制台输出name，并调用修改价格函数 以下是具体代码

<template>
  <div class="car">
    <h2>品牌:{{ name }}</h2>
    <h2>价格:{{ price }}万</h2>
    <h2>颜色：{{ color }}</h2>
    <button @click="changeName">修改品牌</button>
    <button @click="changePrice">修改价格</button>
    <button @click="showLowPrice">查看低价</button>
    <button @click="changeColor">修改颜色</button>

  </div>
</template>
<script lang="ts">
export default{
  name: 'Car',
  data() {
    return {
      color: this.name + '红色'
    }
  },
  methods: {
    changeColor() {
      this.color = '蓝色'
      console.log(this.name);
      this.changePrice();
    }
  },
  setup() {
    let name = '奔驰';
    let price = 100;
    let lowPrice = 80;
    function changeName() {
      name = '宝马'
      console.log(name)

    }
    function changePrice() {
      price += 10;
      console.log(price)

    }
    function showLowPrice() {
      console.log(lowPrice)

    }
    return { name, price, changeName, changePrice, showLowPrice }
  }
}
</script>

setup数据与方法不能访问data数据与methods方法

• 在setup函数中打印color属性，提示异常：Uncaught ReferenceError: color is not defined，页面无法渲染
• 在setup方法中访问color属性，提示异常：Uncaught ReferenceError: color is not defined

让setup函数更优雅

set函数需要返回值，否则模版中无法访问setup定义的属性

setup() {
    let name = '奔驰';
    return { name }
  }

如若新增一个属性weight重量，，就需要返回weight属性

setup() {
    let name = '奔驰';
    return { name，weight }
  }

当有许多个属性时，代码很繁琐，且return { name，weight }是无必要的。只需要在script标签中添加setup可优雅解决

创建一个最简setup函数

<template>
  <div class="car">
    <h2>品牌:{{ name }}</h2>
    <button @click="changeName">修改品牌</button>
  </div>
</template>
<script setup lang="ts">
let name = '奔驰';
function changeName() {
  name = '宝马'
}
</script>

注意script有setup标识，在setup里声明的属性和方法，模版都可以访问。