好家伙,

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

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. dotnet 在 linux 上构建问题(RID 的问题)

    个人理解 一方面 /etc/os-release 中定义的的 ID VERSION_ID 是会与源代码中定义 RID 的相对应,如果不对应,就会报错 The specified RuntimeIden ...

  2. 倾斜摄影3D模型|手工建模|BIM模型 轻量化处理

    一.什么是大场景? 顾名思义,大场景就是能够从一个鸟瞰的角度看到一个大型场景的全貌,比如一个园区.一座城市.一个国家甚至是整个地球.但过去都以图片记录下大场景,如今我们可以通过建造3D模型来还原大场景 ...

  3. wcf .net webService和 .net webApi的联系与差异

    首先,我们需要清楚它们的概念,然后才能走好下一步. wcf是对于ASMX,.Net Remoting,Enterprise Service,WSE,MSMQ等技术的整合,它是一种重量级消息交互框架,广 ...

  4. React技巧之处理tab页关闭事件

    原文链接:https://bobbyhadz.com/blog/react-handle-tab-close-event 作者:Borislav Hadzhiev 正文从这开始~ 总览 在React中 ...

  5. SQL报了一个不常见的错误,让新来的实习生懵了

    摘要:前些天一个很简单的SQL报了一个不常见的错误. 本文分享自华为云社区<记一次mysql关联查询格式冲突问题[五月04]>,作者: KevinQ . 问题起源 作为CRUD程序员,最常 ...

  6. Spring框架系列(7) - Spring IOC实现原理详解之IOC初始化流程

    上文,我们看了IOC设计要点和设计结构:紧接着这篇,我们可以看下源码的实现了:Spring如何实现将资源配置(以xml配置为例)通过加载,解析,生成BeanDefination并注册到IoC容器中的. ...

  7. BetterScroll源码阅读顺便学习TypeScript

    开头 TypeScript已经出来很多年了,现在用的人也越来越多,毋庸置疑,它会越来越流行,但是我还没有用过,因为首先是项目上不用,其次是我对强类型并不敏感,所以纯粹的光看文档看不了几分钟就心不在焉, ...

  8. 【python量化】将Transformer模型用于股票价格预测

    本篇文章主要教大家如何搭建一个基于Transformer的简单预测模型,并将其用于股票价格预测当中.原代码在文末进行获取.小熊猫的python第二世界 1.Transformer模型 Transfor ...

  9. 动态树 — Link_Cut_Tree

    [模板]动态树(Link Cut Tree) Link-cut-tree是一种维护动态森林的数据结构,在需要动态加边/删边的时候就需要LCT来维护. Link-cut-tree的核心是轻重链划分,每条 ...

  10. Tomcat深入浅出——Servlet(二)

    一.Servlet简介 Servlet类最终开发步骤: 第一步:编写一个Servlet类,直接继承HttpServlet 第二步:重写doGet方法或者doPost方法,重写哪个我说的算! 第三步:将 ...