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

vue3函数写法中的状态、函数定义相关推荐

scala 函数中嵌套函数_Scala中的嵌套函数用法和示例
scala 函数中嵌套函数 Scala中的嵌套函数 (Nested functions in Scala) A nested function is defined as a function whi ...
oracle中转换函数,Oracle中的转换函数
Oracle中的转换函数有三个,分别为to_char(),to_date(),to_number() 1.to_char()的用法格式化当前的日期时间 select sysdate,to_char( ...
java有没有回调函数_Java中的回调函数 - wangjianme的个人空间 - OSCHINA - 中文开源技术交流社区...
Java代码的回调函数经常由框架或是系统定义,由程序开发人员填充. 它的最主要特点是即定义了调用的规范同时又非常的灵活. 回调函数有些类似于观察者模式,它们的区别在于:观察者模式返回的参数为Event ...
c 语言的虚函数,C 中的虚函数(virtual function)
一.简介虚函数是C++中用于实现多态(polymorphism)的机制.核心理念就是通过基类访问派生类定义的函数.假设我们有下面的类层次: class Father { public: virtua ...
python中itemgetter函数_Python中的sorted函数以及operator.itemgetter函数
operator模块提供的itemgetter函数用于获取对象的哪些维的数据,参数为一些序号(即需要获取的数据在对象中的序号),下面看例子. a = [1,2,3] >>> b=op ...
java 调用htm中js函数_Lua中调用C函数(lua5.2.3)
Lua可以调用C函数的能力将极大的提高Lua的可扩展性和可用性.对于有些和操作系统相关的功能,或者是对效率要求较高的模块,我们完全可以通过C函数来实现,之后再通过Lua调用指定的C函数.对于那些可被L ...
PHP URL的处理函数,php中url处理函数总结
在php中url处理函数有很多,如有:http_build_query,compact,urldecode.urlencode,parse_url,rawurldecode等等函数. http_bui ...
java sendmessage函数_vc中SendMessage自定义消息函数用法实例
本文实例讲述了vc中SendMessage自定义消息函数用法,分享给大家供大家参考.具体如下: SendMessage的基本结构如下: SendMessage( HWND hWnd, //消息传递的 ...
python继承super函数_Python中的super函数如何实现继承?
本篇文章给大家带来的内容是关于Python 中的super函数如何实现继承?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Py 2.x 和 Py 3.x 中有一个很大的区别就是类,无 ...

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

vue3函数写法中的状态、函数定义相关推荐

最新文章

热门文章