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."访问状态;

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐