setup 概述在vue3中若没有学好setup函数后面学习vue3将会越学越乱。setup是一个函数它在vue3是一个新的配置项是组合式语法 (Composition API)表演的舞台组件中所用的属性、计算属性、方法、监视等等均需要在setup中配置。setup特性setup函数中没有this它是undefinedsetup函数返回的对象内容可直接在模版中调用setup函数在beforeCreate之前调用领先所有生命周期钩子。最简单setup事例语法上节 vue3与vue2语法优劣对比中vue2语法是选项式OptionsAPI如下图既然vue3是组合式语法 (Composition API)它就不应该有datamethods而是所有内容都合并在一起删除data与methos建立setup函数定义数据与方法流程如下删除data内容删除methos内容创建setup函数在setup函数中定义变量与方法setup函数要返回数据与方法供模版使用template div classcar h2品牌:{{ name }}/h2 h2价格:{{ price }}万/h2 button clickchangeName修改品牌/button button clickchangePrice修改价格/button button clickshowLowPrice查看低价/button /div /template script langts 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浏览器输入http://localhost:5173效果如下首次打开页面控制台首先输出this为undefinedsetup没有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 classcar h2品牌:{{ name }}/h2 h2价格:{{ price }}万/h2 h2颜色{{ color }}/h2 button clickchangeName修改品牌/button button clickchangePrice修改价格/button button clickshowLowPrice查看低价/button button clickchangeColor修改颜色/button /div /template script langts 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:namecolor } }, methods: { changeColor() { this.color 蓝色 console.log(this.name); this.changePrice(); } },在浏览器访问效果如下图属性颜色显示奔驰红色修改颜色函数控制台输出name并调用修改价格函数以下是具体代码template div classcar h2品牌:{{ name }}/h2 h2价格:{{ price }}万/h2 h2颜色{{ color }}/h2 button clickchangeName修改品牌/button button clickchangePrice修改价格/button button clickshowLowPrice查看低价/button button clickchangeColor修改颜色/button /div /template script langts 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 } } } /scriptsetup数据与方法不能访问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 { nameweight } }当有许多个属性时代码很繁琐且return { nameweight }是无必要的。只需要在script标签中添加setup可优雅解决创建一个最简setup函数template div classcar h2品牌:{{ name }}/h2 button clickchangeName修改品牌/button /div /template script setup langts let name 奔驰; function changeName() { name 宝马 } /script注意script有setup标识在setup里声明的属性和方法模版都可以访问。