在vue3是通过setup的方式来定义数据和参数，setup函数是Vue3核心的语法，它将代码都放在了setup中。

Vue3的setup和Vue2 对比

template中的代码跟vue2没啥变化，只是在使用v-for需要强制要求绑定key

<h2>{{ title }}</h2>
<h2>{{ num }}</h2>
<ul>
    <li v-for="(category, index) in categorys" :key="index">
        {{ category }}
    </li>
</ul>
<button @click="hello">hello</button>

数据和方法统一放到了setup中了

export default {
  name: 'App',
  setup(){
    return {
      title: '商品分类',
      num: 30,
      categorys: ['女装', '男装', '家电'],
      hello () {
        alert('hello vue3');
      }
    }
  }
}

下面是Vue2的写法

export default {
  name: 'App',
  data () {
    return {
      title: '商品分类',
      num: 30,
      categorys: ['女装', '男装', '家电'],
    }
  },
  methods: {
    hello () {
      alert('hello vue3');
    }
  }
}

总体来说代码比之前短了，这样写参数和方法一把梭都放在了setup中了。

Vue3使用旧语法注意的点

在Vue3中依旧可以使用data和methods方法，只不过不推荐。

相同名称

需要注意的是在setup和data同时定义相同的变量名，优先使用的是setup

data () {
  return {
    title: '分类'
  }
},
setup(){
  return {
     title: '商品分类'
  }
},

页面打印的 “商品分类”

在方法中获取属性

在setup是获取不到data里面的值

  data () {
    return {
      title: '分类'
    }
  },
  setup(){
    let num = 30;
    return {
      num: num,
      hello () {
        console.log(`num: ${num}`)
        // 报错title is not defined
        // console.log(`title: ${title}`)
        console.log(`this.title: ${this.title}`)
      }
    }
  }

打印输出：

num: 30

this.title: undefined

总结

在Vue3中尽量使用setup定义参数和方法，虽然Vue2的data和methods依然可以用，但是不太规范和会出现问题