好家伙,

来一波核心概念:数据劫持是响应式的核心

1.由set up开始

(1)vue3中的一个新的配置项,值为一个函数.

(2)组件中所用的到的:数据,方法,计算属性均要配置在set up中.

(3)set up函数的两种返回值:1.若返回对象,则对象中的属性,方法可以在模板中直接使用,

            2.返回函数(渲染函数)

注意:vue2和vue3的配置不要混用,set up不能访问到vue2的配置

2.ref函数

作用:定义一个响应式数据 (把你的数据封装成一个对象,放在value里,使用get和set实现响应式)

语法:JS中操作数据: XXX.value

全名:Refimpl Ref:reference 引用   impl:implement 实现

inport {ref} from 'vue'
set up(){
let name =ref('张三')
let job =ref({
type:'前端工程师',
salary:'30k'
})
}
return{
.......
}

所以:1.处理基本数据类型用的get.set完成的

    2.处理对象类型数据中,就不是再套一层ref对象,而是用的Proxy代理对象(内部求助reactive函数)

3.reactive函数:
3.1.作用:定义一个对象类型的响应式数据(关键字:对象类型,基本类型还是用ref函数)(深层次,你套多少层都行)

3.2.语法:(接受一个对象,返回一个代理对象)

const 代理对象 = reactive(源对象)

3.3.reactive定义的响应式数据是深层次的

3.4.内部基于Proxy(不知道啥玩意,以后会学)对象实现,

就这么多了

强啊,尚硅谷

第三十五篇:vue3,(组合式api的初步理解)的更多相关文章

  1. Android UI开发第三十五篇——AppCompat实现Action Bar

    每一位Android开发者对Action Bar这种设计都不陌生了,毕竟它已经发布了至少两年了.Android团队发布Action Bar设计规范时同时放出了ActionBar的Api来支持这种设计. ...

  2. 第三十九篇:Vue3 watch(ref和reactive的监视)

    好家伙, 1.vue2中的watch是调用配置项,(只能写一个) vue3中的watch是一个函数(可以写很多个) 2.watch一些用法: 这里是定义的数据 set up(){ let sum =r ...

  3. Python之路(第三十五篇) 并发编程:操作系统的发展史、操作系统的作用

    一.操作系统发展史 第一阶段:手工操作 —— 真空管和穿孔卡片 ​ 第一代之前人类是想用机械取代人力,第一代计算机的产生是计算机由机械时代进入电子时代的标志,从Babbage失败之后一直到第二次世界大 ...

  4. 第三十五篇-AppBarLayout的使用

    效果图: 添加appbarlayout到xml文件中,然后在toolbar下面添加一个imageview并设置居中放置,我放置的是上面那个安卓的图标. 根据之前学过的toolbar那一节,结合view ...

  5. 第三十五篇 类的内置属性(attr属性),包装和授权,__getattr__

    双下划线开头的attr方法,都是类内置的方法. 一. 如果没有在类里定义这三个方法,调用的时候就调用类内置的默认的方法 class Too: pass # 类没有定义这三个属性,就用系统默认的方法 t ...

  6. 第三十八篇:vue3路由

    好家伙,水博客怎么说 1.0.安装:简简单单的淘宝镜像安装 装一下淘宝镜像(一般都有) npm install -g cnpm --registry=https://registry.npm.taob ...

  7. 第三十六篇:vue3响应式(关于Proxy代理对象,Reflect反射对象)

    好家伙,这个有点难. 1.代理对象Proxy Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找.赋值.枚举.函数调用等). 拦截对象中任意属性的变化,包括:查get, ...

  8. 第三十五篇 入门机器学习——Juptyer Notebook中的常用快捷键

        1.运行当前Cell:Ctrl + Enter   2.运行当前Cell并在其下方插入一个新的Cell:Alt + Enter   3.运行当前Cell并选中其下方的Cell:Shift + ...

  9. C++第三十五篇 -- 写第一个驱动开发程序

    VS2017+WDK+VMware12+Win10环境配置完毕,接下来写第一个驱动程序. 1.新建一个KMDF的程序. 2.配置项目属性. 3.编译项目.一般这里应该成功,我一台电脑成功了,另一台电脑 ...

随机推荐

  1. SAP ABAP 快速入门之 开发环境 (Environment)

    报表是学习ABAP 原则和工具的很好的 起点.ABAP 报表在许多领域都有使用,本章将介绍简单ABAP 报表的开发. Hello ABAP 让我们以'Hello World' 开始. 每一个abap ...

  2. SAP Using Text Modules in Adobe Forms

    In this demo we will create an adobe form which displays text in two different languages (English or ...

  3. 下载安装myslq-----win

    在百度上搜索MySQL官网,进入下载页面-->选择社区版(Community)-->选择MySQL Community Server后,点击DOWNLOAD按钮-->Generall ...

  4. -bash: /usr/local/maven/apache-maven-3.8.1/bin/mvn: 权限不够

    chmod a+x /usr/local/maven/apache-maven-3.8.1/bin/mvn

  5. 《A Neural Algorithm of Artistic Style》理解

    在美术中,特别是绘画,人类掌握了通过在图像的内容和风格间建立复杂的相互作用从而创造独特的视觉体验的技巧.到目前为止,这个过程的算法基础是未知的,也没有现存的人工系统拥有这样的能力.然而在视觉感知的其他 ...

  6. CentOS7下bash升级

    [1.查看系统版本][root@web ~]# uname -aLinux web 3.10.0-1160.el7.x86_64 #1 SMP Mon Oct 19 16:18:59 UTC 2020 ...

  7. go-zero微服务实战系列(十、分布式事务如何实现)

    在分布式应用场景中,分布式事务问题是不可回避的,在目前流行的微服务场景下更是如此.比如在我们的商城系统中,下单操作涉及创建订单和库存扣减操作两个操作,而订单服务和商品服务是两个独立的微服务,因为每个微 ...

  8. 攻防世界进阶区MISC ——56-60

    56.low 得到一张bmp,世纪之吻,扔进kali中,binwalk,zsteg,无果,再放进stegsolve中,虽然发现小的数据块,但是过滤通道得不到任何信息,猜测是要用脚本进行 # lsb隐写 ...

  9. AI写代码! 神器copilot介绍+安装+使用

    !郑重提示!!!!!!!: 正在学编程.算法的同学请千万不要依赖此插件,否则你可能甚至无法手写出一个for循环 AI帮我写代码?我帮AI写代码?庄周梦蝶?蝶梦庄周?十分梦幻. copilot在VSco ...

  10. Node.js精进(10)——性能监控(下)

    本节会重点分析内存和进程奔溃,并且会给出相应的监控方法. 本系列所有的示例源码都已上传至Github,点击此处获取. 一.内存 虽然在 Node.js 中并不需要手动的对内存进行分配和销毁,但是在开发 ...