qq_52563729的博客

使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data,methods,computed里修改。Options API存在的问题，在vue2中都是配置式的api，在vue3中就变成了组合式api。套路:父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这些数据。isProxy:检查一个对象是否是由reactive或者readonly方法创建的代理。在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个。在Vue2中:组件必须有一个根标签。

shallowReactive:只处理对象最外层属性的响应式（浅响应式)。shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。扩展:toRefs 与toRef功能一致，但可以批量创建多个ref对象，语法:toRefs(person)，这里面直接放对象！如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换===> shallowRef。使用场景:用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。应用场景:不希望数据被修改时。

1.监视reactive定义的响应式数据时: oldValue无法正确获取、强制开启了深度监视(deep配置失效)。2.监视reactive定义的响应式数据中某个属性时: deep配置有效。不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。情况四:监视reactive所定义的一个响应式数据中的某个属性。情况五:监视reactive所定义的一个响应式数据中的某些属性。情况三:监视reactive所定义的一个响应式数据的全部属性。情况一:监视ref所定义的一个响应式数据。

vue3

第一个红框判断是不是我们要去的地方，如果是我们就看条件满不满足，如果不满足我们就输出条件不满足，如果满足我们就next（）放行。2.通过切换，“隐藏""了的路由组件，默认是被销毁掉的，需要的时候再去挂载。先销毁现在的组件，再挂载新的组件。注意点：我们使用params参数传递数据的时候，必须使用name，而不能使用path来代表路径。push不会产生替换，就一直往里面存，replace会直接替换当前的记录，默认是push！meta：路由元信息，程序员自定义的信息，谁需要权限的校验我们就放在哪里。

专门在Vue中实现集中式状态(数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。假如说我们写在方法里面，我们所有的组件自身都需要一个真伪判断，如果我们抽象到actions里面，那么就只需要一个判断方法，提高复用性。如果没有引号就是sum：sum，就会导致后面的解析错误！这里我们的he就可以代表我们的$store.state.sum，那如果有一堆这样的东西，是不是我们需要把我们所有的都配置成计算属性呢？

1.理解:数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件。2.具名插槽，这个必须包裹在template中。默认插槽、具名插槽、作用域插槽。

1.当我们请求的资源8080本身就有就不会转发给5000（缓存），但是只是名字一样，内容可能不一样。比如说两个张三，但是不是一个人！这个/api作用是什么？是一个请求前缀，看是不是api请求，如果是那么就给你转发到5000去。这个atguigu会被错误的带给服务器！在配置代理服务器里面写一个正则表达式，将/atguigu设置为空字符串就可以了！开启代理服务器，本机地址是8080，但是我们代理需要告诉我们的5000端口，所以这里需要一个代理！2.只能配置一个代理，只能配置一个5000，不能配置其他代理。

1.一种组件间通信的方式，适用于任意组件间通信。1.接收数据:A组件想接收数据，则在A组件中给。一定要写成箭头函数，this才对。去解绑当前组件所用到的事件。事件的回调留在A组件自身。

自定义事件

1.如果我们的样式没有加入我们的scoped，那么会根据引入的顺序，后面的同名样式会覆盖前面的样式，只和引入顺序有关！3.注意app组件中一般不适用scoped，app组件里面一般放公用的样式。vue插件本质就是一个对象，写在src目录下面，插件每次都是最先启动的。原理：给我们最外侧的div加上一个属性，而且每次是随机生成的！2.如果我们加上scoped就不会影响别人。2.使用插件：Vue.use（）

我们需要设置一个中转变量MYage，这里会有个问题，我们点击方法里面必须写MYage++，如果写成MYage+=1会到当做字符串处理，会报错！甚至可以在混合里写mounted，相当于在混合组件里写了mounted函数！1.data中的数据 和mothes中的方法，如果发生冲突，都以组件里面的为主，不会破坏组件本身的代码。2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc)首先直接修改会达到目的，但是会报错！2.mounted可以有多个，不会冲突！

单文件组件

组件的几个注意点，组件嵌套,Vuecomponent，内置关系

1

vue

指令

数据修改

1

1

class，style

区别

监视属性

计算属性

传参，修饰符

数据代理

基础