好家伙,

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

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. BUUCTF-BJDCTF2020]just_a_rar

    BJDCTF2020]just_a_rar 压缩包提示是四位数密码 爆破得知压缩包密码 16进制查看解压的图片后发现flag flag{Wadf_123}

  2. SAP Smartforms 参数配置

    DATA : sf_name TYPE rs38l_fnam. DATA : sf_output_options TYPE ssfcompop. DATA : sf_control_parameter ...

  3. babeljs源码

    babel.min.js!function(e,t){"object"==typeof exports&&"object"==typeof mo ...

  4. VisionPro · C# · 加密狗检查程序

    写VisionPro C#项目时,我们需要在程序的启动时加载各种配置文件,以及检查软件授权,以下代码即检查康耐视加密狗在线状态,如查无加密狗,关闭程序启动进程并抛出异常. 1 using System ...

  5. OpenLayers入门(一)

    OpenLayers简介 OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用的高性能的.功能丰富的JavaScript类库,可以满足几乎所有的地图开 ...

  6. Python爬取全球是最大的电影数据库网站IMDb数据

    在使用 Python 开发爬虫的过程中,requests 和 BeautifulSoup4(别名bs4) 应用的比较广泛,requests主要用于模拟浏览器的客户端请求,以获取服务器端响应,接收到的响 ...

  7. nginx转发rabbitmq

    第一种: 直接加个location块 location /rabbitmq/ { proxy_pass http://127.0.0.1:15672/; } 第二种: location /rabbit ...

  8. 详解SQL中Groupings Sets 语句的功能和底层实现逻辑

    摘要:本文首先简单介绍 Grouping Sets 的用法,然后以 Spark SQL 作为切入点,深入解析 Grouping Sets 的实现机制. 本文分享自华为云社区<深入理解 SQL 中 ...

  9. Java开发学习(十)----基于注解开发定义bean 已完成

    一.环境准备 先来准备下环境: 创建一个Maven项目 pom.xml添加Spring的依赖 <dependencies>    <dependency>        < ...

  10. Java方法的重写

    package Demo.oop.APP.Demo04; //启动器 public class application { public static void main(String[] args) ...