在vue3是透过setup的形式来表述统计数据和模块,setup表达式是Vue3核心理念的句法,它将标识符都放在了setup中。
Vue3的setup和Vue2对照
template中的标识符跟vue2没啥变动,而已在采用v-for须要强制性明确要求存取key
{{ title }}
{{ num }}
{{ category }}hello统计数据和形式标准化放在了setup中了
exportdefault {name:App,setup(){return {title:货品进行分类,num:30,categorys:[男装,男装,家用电器],hello (){alert(hello vue3);} }}}
上面是Vue2的读法
exportdefault {name:App,data (){return {title:货品进行分类,num:30,categorys:[男装,男装,家用电器],} },methods:{hello (){alert(hello vue3);} }}
整体而言标识符比以后短了,这种写模块和形式两把梭都放在了setup中了。
Vue3采用旧句法特别注意的点
在Vue3中依然能采用data和methods形式,或者说不所推荐。
完全相同中文名称
须要特别注意的是在setup和data与此同时表述完全相同的cp,优先选择采用的是setup
data (){return {title:进行分类}},setup(){return {title:货品进行分类}},
页面打印的“货品进行分类”
data (){return {title:进行分类} },setup(){letnum=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依然能用,但是不太规范和会出现问题