-->按钮、{{scope.title}}、{{scope.mynum}}子组件：子组件:import{reactive,toRefs}from'vue';let{num}=toRefs(reactive

内部是深层次只读的如代码所示：当前求和是：{{sum}}点我加一姓名：{{name}}年龄：{{age}}薪资：{{job.j1.salary}}修改信息增长年龄涨薪import{ref,reactive,toRefs

特殊文件夹说明：types定义一些Typescript数据约束use组合是函数的统一管理，文件名默认以use开头Vue3一些新特性CompositionAPI创建响应式对象的方式:ref、toRef、toRefs

注意将接收参数监听用toRefs方式获取使用//固定值不变的方式const{param}=defineProps({param:{type:Number,default:()=>{}}})修改为constprops

vue3的特点更多的API特性体积更小、速度更快解决遗留问题（比如对TS不友好、代码组件逻辑复用）createApp表示创建一个Vue应用，传入的参数表示这个应用最外层的组件应该如何展示。//createApp表示创建一个Vue应用,存储到app变量中//传入的参数表示，这个应用最外层的组件，应该如何展示//MVVM设计模式，M->Model数据，V->View视图，VM->ViewModel视图

目录Ⅰ.ref、reactive(递归监听)Ⅱ.isRef、isReactive(判断)Ⅲ.toRef和toRefs(解构)Ⅳ.toRaw、markRaw(解除代理)Ⅴ.unref(拷贝)Ⅵ.shallowRef

1、ref:为数据添加响应式状态，返回一个具有响应式状态的副本。setup要通过'.value'属性来获取，template则会自动带入.value比如：constcount=ref(1);console.log('count.value:>>',count.value);//1由于reactive只能传入对象类型的参数，而对于基本数据类型要添加响应式状态就只能用ref了.同样返回一个具有响应式状

reactivereactive会对传入对象进行包裹，创建一个该对象的Proxy代理。它是源对象的响应式副本，不等于原始对象。它“深层”转换了源对象的所有嵌套property，解包并维持其中的任何ref引用关系。reactiveAPI很好地解决了Vue2通过defineProperty实现数据响应式时的缺陷。使用也非常简单：{{state.age}}//1.从vue中导入reactiveimpor

1.ref的使用ref接受一个原始值，返回一个具有响应式的对象，对象有一个value属性，其值就是所传递的原始值。ref是做的一个拷贝关系，修改对象msg的值，不会影响对象obj，视图会发生变化。import{ref}from"vue";letobj={name:"你好",age:16};letmsg=ref(obj.name);console.log(msg.value);//你好letarr=

目录1.什么是响应式2.选项式API的响应式数据3.组合式API的响应式数据3.1reactive()函数3.2toref()函数3.3toRefs()函数3.4ref()函数总结1.什么是响应式这个术语在今天的各种编程讨论中经常出现

2022-09-02更新：这篇文章写了比较久了，不推荐大家再往下看。推荐大家去看Vue.js设计与实现这本书，讲得很好，看完绝对能彻底理解响应式。在网上看了很多文章没有一个能把这些效果讲清楚的。我写一下自己试出来的结果。先说一下我根据结论得出的理解：只有响应式数据能更新界面，ref()、reactive()可以生成响应式数据。ref即可以用于基础数据类型，也可以用于复杂数据类型；reactive用

新特性API-组合式APIsetupimport{ref,toRefs,readonly,watch,computed}from"vue";exportdefault{name:"demo",//添加组合式

一、Hook函数Vue3的hook函数相当于vue2的mixin，不同点在于hooks是函数。Vue3的hook函数可以帮助我们提高代码的复用性，能在不同的组件中都使用hook函数。在src目录下建立一个hooks文件夹，文件夹中新建一个我们要用的方法的名字.js文件（一般情况下use开头）。useCar.jsimport{ref,computed}from'vue'exportdefaultfu

vue.jpgref、reactive响应式引用引用Document//ref、reactive响应式的引用//原理：通过proxy对数据进行封装，当数据变化时，触发模板等内容的更新//ref处理基础类型的数据//reactive处理非基础类型的数据constapp=Vue.createApp({//template:`{{nameObj.name}}`,template:`姓名:{{name}}

image.pngtoRef(obj,key)修改一个值toRefs(obj)遍历里面所有的值都能够修改toRef是复制地址修改值，深拷贝toRaw是指向旧地址修改值，浅拷贝image.png