在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依然可以用，但是不太规范和会出现问题
