vue3函数写法中的状态、函数定义

vue3中有两种写法：类写法、函数写法（hooks）

类写法跟vue一样，函数写法是新增的；

状态是什么：

页面中要显示的东西，放在一个变量中，每次更改完值，就会被拦截，同时再重新渲染页面；

状态的对立面就是属性；

可以没有状态，那只能用父组件传过来的属性来自己用；

自己没有状态，只能使用父组件的属性，那就成了父组件的傀儡了；

函数写法中的状态定义：

<template>
    <div>
        <!-- vue3-新写法: -->
        {{obj.myname}}
        <button @click="handleClick()">change</button>
    </div>
</template>
<script>
import { reactive } from '@vue/reactivity'
export default {
    //vue3老写法/vue写法中beforeCreate，created生命周期 == setup
    //自动执行，立即执行
    setup(){
        console.log("setup")

        //定义状态
        const obj=reactive({
            myname:"yiyi",
            myage:100
        })

        //定义函数
        const handleClick=()=>{
            obj.myname='linlin'
        }
        return {
            obj,
            handleClick
        }
    }
}
</script>

定义状态：

• vue3定义状态和函数不在data和methods里了，统一在一个生命周期函数 setup 里定义；
• 这个setup生命周期函数相当于vue类写法中的beforeCreate、created生命周期，自动执行，立即执行；
• 在reactive（）函数里定义状态，用一个变量（obj）接收，这个obj变量在return中返回；
• 用reactive（）函数定义状态时，要引入 {reactive}：import { reactive } from '@vue/reactivity'

<script>
import { reactive } from '@vue/reactivity'
export default {
    //vue3老写法/vue写法中beforeCreate，created生命周期 == setup
    //自动执行，立即执行
    setup(){
        //定义状态
        const obj=reactive({
            myname:"yiyi",
            myage:100
        })
        return {
            myname,
            myage
        }
}

定义函数：直接在setup里定义，然后再return中返回；

setup(){
//定义函数
const handleClick=()=>{
}
return {
    handleClick
  }

}

访问状态：{{obj.myname}}

• 在函数里能利用"obj."访问状态；