Vue2.0到3.0的过渡，setup，ref函数，reactive函数，计算属性computed

news/2024/5/17 1:47:25/文章来源:https://blog.csdn.net/m0_63470734/article/details/126917142

setup

1、Vue3.0的组件中所有用到的:数据、方法等等，均要配置在setup中，若要使用里面的数据，可以用return将其返回出来

2、若在setup中返回的是一个对象，则对象中的数据、方法、在模板中均可直接使用

例如
<template><div class="home"><h1>{{msg}}</h1><h2>{{name}}</h2><button @click="fn">打印小羊</button></div>
</template><script>export default {setup() {// 现在暂时还不考虑响应式数据的问题// 数据 let msg="0730"let name="小狮子"//方法let fn=function(){console.log("小羊")}return {msg,name,fn}}}
</script>
界面效果，以及点击按钮后控制台打印的内容

3、setup的另一种写法（更简洁）

直接setup属性写入script标签中即可，不再使用export default和setup函数以及return

如
<template><div class="home"><h1>{{msg}}</h1><h2>{{name}}</h2><button @click="fn">打印小羊</button></div>
</template><script setup>// 现在暂时还不考虑响应式数据的问题// 数据 let msg="0730"let name="小狮子"let fn=function(){console.log("小羊")}</script>
4、注意：

尽量不要和Vue2.0配置混用

Vue2.0配置（data，methods，computed......）中可以访问setup中的属性，方法

但在setup中不能访问到Vue2.0配置(data，methods，computed......)

如有重名，setup优先

setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性

ref函数

1、作用：定义一个响应式的数据（一般用于基本数据类型和嵌套层级比较低的引用数据类型）

2、语法：

例如：声明一个响应式数据变量a 给它赋值为"666"

const a= ref("666")

在script标签内操作a的数据时需要用 .value 即 a.value

模板（template）中读取数据不需要.value,直接<div>{{a}}</div>

响应式数据一定要用import从vue中引入
<template><div class="home"><h1>{{msg}}</h1><h2>{{name}}</h2><button @click="fn">将小狮子变大狮子</button><h1>{{msg1}}</h1><h2>{{name1}}</h2><button @click="fn1">将小羊变大羊</button></div>
</template><script setup>import{ref} from "vue" //引入响应式数据let msg="0730"let name="小狮子"let msg1=ref("1020")let name1=ref("小羊")let fn=function(){name="大狮子"console.log(name,"不是响应式数据")}let fn1=function(){name1.value="大羊"console.log(name1.value,"这是响应式数据")}</script>
效果图：

当我们点击第一个按钮时，界面的反应以及控制台打印如下：

随着数据改变而界面没有改变说明这不是响应式数据。

当我们点击第二个按钮时，界面的反应以及控制台打印如下：

界面随着数据改变而改变说明这是响应式数据。

reactive函数

作用：定义一个引用数据类型的响应式数据

语法：和ref函数类似，如 const obj= reactive({name:"小狮子",age:"18"}),但在使用该数据时无论是在template还是script标签里都是直接使用即可，不需要像ref函数在script标签里的.value一样使用

reactive定义的响应式数据是“深层次的”

内部基于ES6的Proxy实现，通过代理对象内部的数据都是响应式的
<template><div><template v-for="el in arr"><h1>{{el.msg}}</h1><h2>{{el.name}}</h2></template><button @click="fn1">改变第一个name</button></div>
</template><script setup>import{reactive} from "vue"let arr=reactive([{msg:"0730",name:"小狮子"},{msg:"1020",name:"小羊"}])let fn1=function(){arr[0].name="大狮子"}</script>
效果图：

点击按钮之后的变化

同样证明出是响应式数据。