一、setup文件的认识
特点1:script 中间的内容就是一个对象
特点2:script 在第一层 定义的方法 或者 变量 => 就是这个对象 属性 => 顶层的绑定回被暴露给模板(模板可以直接使用这个变量)
特点3:setup 默认执行生命周期beforeCreate created 注意:这个对象 => 就是当前这个组件实例二、什么是响应式api
处理 数据 => 我们把页面写的数据,需要动态改变的数据 => 叫做响 响应式数据 => 数据改变视图中使用了这个数据,这个数据回对应的 响应式数据底层实现 => vue3 => Proxy
可以把数据变成响应式api 的方法叫做响应式 api三、在vue3 中有哪些常用的响应式API?
响应式核心:
1、ref()
作用:将一个基本数据类型的数据变为响应式
语法:let 变量=ref(处理的数据)
<template> <div> <h2>响应式api</h2> <h2>{{age}}</h2> <button @click="addAge">change</button> </div> </template> <script setup> import {ref} from 'vue'; // ref 处理的数据 // 1 基本数据类型 => 通过vue2 响应式原理来实现Object.defineProperty() // 2 处理的复杂的数据类型 => reactive()这个响应式api let age=ref(29); // 通过ref 处理的数据 => 变成响应式 let data=ref({ages:50}); console.log(data,"data") const addAge=()=>{ age.value+=1; console.log(age); }
</script> <style> </style>
2、reactive()
作用:将复杂的数据类型变成响应式数据 语法:let data=reactive({处理的数据}) 特点:1. 就是proxy代理可以将对象中第一层的属性变成响应式,不用递归,提供性能优化。2. 就是 proxy 代理的数据时对象,这个对象中有深层次,它会实现懒代理(就是用户只有在使用了这个数据,才会将这个数据变为响应式数据)<template> <div> <h2>响应式api</h2> <h2>{{objP.name}}的年龄{{objP.age}}</h2> <button @click="changeName">changeName</button> <button @click="changeLike">changeLike</button> </div> </template> <script setup> import {reactive} from 'vue'; // 作用将复杂的数据类型变成响应式数据 let objP=reactive({ name:"小明", age:8, like:{eat:' 标签:name,reactive,ref,age,响应,api,Vue3,数据 From: https://www.cnblogs.com/chccee/p/17032036.html