Proxy响应式原理 1.Vue2的响应式 实现原理： 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持） 数组类型：通过重写更新数组的一系列方法来实现拦截，（对数组的变更方法进行了包裹） Object.defineProperty(data, 'count', { get(){}, set(){} }) 存在问题： 新增属性、删
Vue3新组件 【Teleport】 什么是Tepeport: -- Teleport是一种能够将我们的组件html结构移到到指定位置的技术 比如弹窗，我们在父组件中引入了弹窗，但是由于父的容器加了特殊的css，导致我们弹窗的position:fixed受到了影响，不会以浏览器窗口为基准了，这就不会满足我们的需求，此时就需要用到Teleport <template> &l
其它 API 【shallowRef 与 shallowReactive】 shallowRef 作用：创建一个响应式数据，但只对顶层属性进行响应式处理。 用法： let myVar = shallowRef(initValue) 特点：只跟踪引用值的变化，不关心值内部的变化 shallowReactive 作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，
【slot】 插槽：简单说就是父组件内部使用了子组件，但是子组件内部某些结构需要使用者自行定义，此时就需要用到插槽实现 默认插槽 默认插槽的name是default 父组件 <template> <div> <Child> <h3>默认插槽</h3> </Child
组件通信 Vue3组件通信和Vue2的区别： 移出事件总线，使用mitt代替。 vuex换成了pinia。 把.sync优化到了v-model里面了。 把$listeners所有的东西，合并到$attrs中了。 $children被砍掉了。 常见搭配形式： props 概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。 若 父传子：属性值是非函数。 若 子传父：
pinia案例gitee地址 1. pinia 准备一个效果 【搭建 pinia 环境】 安装pinia: npm install pinia/yarn add pinia 第二步：操作src/main.ts import { createApp } from 'vue' import App from './App.vue' /* 引入createPinia，用于创建pinia
1. 路由 【对路由的理解】 【基本切换效果】 Vue3中要使用vue-router的最新版本，目前是4版本 路由配置文件代码如下： // 创建一个路由器，并暴露出去 // 第一步：引入createRouter import { createRouter, createWebHistory } from 'vue-router' // 引入一个一个可能要呈现组件 import H
1. 生命周期 概念： Vue组件实例在创建时要经历一些列的初始化步骤，在此过程中vue会在合适的时机，调用特定函数，从而让开发中有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子 规律： 生命周期整体分为四个阶段：分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后 Vue2的生命周期 创建阶段：beforeCreate、created 挂载阶段：befo
1. 标签的ref属性 作用：用于注册模板引用 用在普通DOM标签上，获取的使DOM节点 用在组件标签上，获取的是组件实例对象 用在子组件上，父组件想要访问子组件内的数据，需要使用defineExpose暴露 用在普通DOM标签上： <template> <div> <h2>哈哈</h2> <h2 ref=&
1. computed计算属性 作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。 2. watch监视与watchEffect 1. watch 作用：监视数据的变化（和Vue2的watch作用一致） 特点：Vue3中的watch只能监视以下4种数据： ref定义的数据 reactive定义的数据 函数返回一个值（getter函数） 一个包含上述内容的数组
1. ref和reactive ref创建：基本类型的响应式数据 作用：定义响应式变量 语法：let xxx = ref(初始值) 返回值：一个RefImpl的实例对象，简称ref对象或ref,ref对象的value属性是响应式的 注意点： JS中操作数据需要xxx.value,但模板中不需要.value,直接使用即可 对于let name = ref('张三')来说，name不是响应式的
1. OptionsAPI与CompositionAPI Vue2的API设计是Options(配置)风格的 Vue3的API设计是Composition(组合)风格的 Options API的弊端： Options类型的API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求,就需要分别修改：data、mothods、compute
1. Vue3简介 性能的提升 打包大小减少41% 初次渲染快55%，更新渲染快133% 内存减少54% 源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking 拥抱TypeScript Vue3可以更好的支持TypeScript 新的特性 Composition Api(组合Api) setup ref和rea
1. setState更新状态的2种写法 对象式的setState:setState(setChange, [callback]) setChange为状态改变对象（该对象可以体现出状态的更改） callback是可选的回调函数，它的状态更新完毕，界面也更新后（render调用后才被调用） 函数式的setState:setState(updater, [callback]) update
笔记gitee地址 学习了 redux,为什么还要讲react-redux呢？ redux不是专门为react所创建的,只不过在某一刻，react和redux看对眼了，所以俩人走到了一起，所以为了更好的支持redux,react官方出了react-redux来更好的支持redux 1. react-redux工作流程 2. 案例 1. 求和案例react_redux基本使用 明确两个概念：
笔记gitee地址 一、redux是什么 redux是一个专门用于做状态管理的js库（不是react插件库） 它可以用在react、angular、vue的项目中，但基本与react配合使用 作用：集中式管理react应用中多个组件共享的状态 二、什么情况下需要使用redux 某个组件的状态，需要让其他组件可以随时拿到（共享） 一个组件需要改变另一个组件的状态（通信） 总体原则：能不用就不用
路由 一、版本5路由 1. react-router-dom 2. 路由的使用 1. 基础使用 安装：yarn add react-router-dom@5 明确好界面中的导航区、展示区 导航区Link标签包裹 <Link to="/home">Home</Link> 展示区写在Route标签进行匹配 <Route path='/home' co
一、使用脚手架create-react-app创建项目 react脚手架 xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置（语法检查、jsx编译、devServe...） 下载好了所有相关的依赖 可以直接运行一个简单的效果 react提供了一个用于创建react项目的脚手架库：create-react-app 项目的整体技术架构为：react+webp
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
