data
在vue2
中的 data
可以用vue3
中的reactive
与 toRefs
配合使用(也可以使用ref
我自己很少使用ref
如果页面只定义一个变量的时候使用ref
)
<script setup>
import { reactive, toRefs } from 'vue' // 引入
const state = reactive({
active: '1234'
})
const { active } = toRefs(state) // 可以直接在<template>中使用 active
// 方法 在<script> 使用 reactive 生成的变量 都要带上 state
const getList = () => {
state.active = '5678'
console.log(state.active)
}
getList()
</script>
<template>
{{active}}
<template>
computed
vue3
中的 computed
import { reactive, toRefs, computed } from 'vue' // 引入
const state = reactive({
active: '1234'
})
const { active } = toRefs(state) // 可以直接在<template>中使用 active
const changeActive = computed(() => {
return state.ative * 3
})
</script>
<template>
{{changeActive}}
<template>
watch
<script setup>
watch(
() => state.active, // 监听的变量
() => {
// 你的操作
}
)
<script>