Vue3拒绝写return，用setup语法糖,让写Vue3更畅快

2023-09-15 19:22| 来源: 网络整理| 查看: 265

标准组件需要写setup函数并繁琐retrun

//import引入的内容 import { getToday } from './utils' export default{ setup(){ // 变量 const msg = 'Hello!' // 函数 function log() { console.log(msg) } //想在tempate里面使用需要在setup内return暴露出来 return{ msg, log, getToday } } } {{ msg }} {{getToday()}}

总结：语法糖里面的代码会被编译成组件 setup() 函数的内容，不需要通过return暴露声明的变量、函数以及import引入的内容，即可在使用，并且不需要写export default{}

语法糖里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的只在组件被首次引入的时候执行一次不同，中的代码会在每次组件实例被创建的时候执行

console.log('script');//多次实例组件,只触发一次 export default { setup() { console.log('setupFn');//每次实例化组件都触发和script-setup标签一样 } }

（script-setup标签最终都会编译成setup() 函数的内容，每次实例化组件，就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件，就是实例化一次setup函数，但是script标签setup是需要写在export default{}内的，外的只是首次引入的时候执行一次）

【本文地址】

公司简介

联系我们