Vue3
setup() 和 ref() 的使用
ref() 这是 vue3 声明变量的方式,并且在 setup() 中 return 返回出去才可以在页面中使用。 vue2 声明的变量需要放在 data 中声明使用。
vue2 中修改 data 中的变量需要在 methods 中定义方法,在方法中改变值。vue3 直接在 setup() 中声明方法操作变量。通过 ref() 声明的变量需要通过 .value 进行赋值和读取操作。
举个例子:点击按钮,显示累计点击数。
<template>
<span>累计点击数:{{ count }}</span>
<br />
<button @click="changeCount">点击</button>
</template>
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const count = ref(0 as number);
const changeCount = () => {
count.value++;
};
return {
count,
changeCount,
};
},
});
在 setup() 中通过 ref() 声明变量,通过 .value 读取值。在页面中需要用到 count 和 changeCount ,则需要 return 。
reactive()
这也是一个方法,接受的参数是一个 Object 。可以修改变量值,不再需要通过 .value 去改变值,也不需要再将一个个的都 return ,这只需要返回一个 data 就可以了。
举个例子:点击按钮,显示累计点击数。
<template>
<span>累计点击数:{{ data.count }}</span>
<br />
<button @click="data.changeCount">点击</button>
</template>
import { defineComponent, reactive } from "vue";
export default defineComponent({
setup() {
const data = reactive({
count: 0,
changeCount: () => {
data.count++;
},
});
return {
data,
};
},
});
在 setup() 中通过 reactive() 定义变量,通过 data. 操作值。在页面中需要 count 和 changeCount , 所以需要在 setup() 中 return { data } , 通过 data.count 和 data.changeCount 来实现。
toRefs()
使用 reactive() 在 template 中总是需要在变量前添加 data ,如果使用解构,就不具备响应式了。可以在 return 时通过 toRefs() 返回。
举个例子:点击按钮,显示累计点击数。
<template>
<span>累计点击数:{{ count }}</span>
<br />
<button @click="changeCount">点击</button>
</template>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
setup() {
const data = reactive({
count: 0,
changeCount: () => {
data.count++;
},
});
return {
...toRefs(data),
};
},
});
使用 ...toRefs() 返回数据,在 template 就不用在变量前加上 data 。
vue3 生命周期和钩子函数
setup()
开始创建组件之前,在 beforeCreate 和 created 之前执行。创建的是 data 和 methods 。
标签:count,return,changeCount,setup,reactive,Vue3,data From: https://www.cnblogs.com/4shana/p/16948402.html