vue3中的常用属性和方法

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>