随笔分类 - vue / # vue3 学习路程
摘要：Proxy响应式原理 1.Vue2的响应式 实现原理： 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）数组类型：通过重写更新数组的一系列方法来实现拦截，（对数组的变更方法进行了包裹） Object.defineProperty(data, 'cou
阅读全文
摘要：8.Vue3新组件 【Teleport】 什么是Tepeport: – Teleport是一种能够将我们的组件html结构移到到指定位置的技术 比如弹窗，我们在父组件中引入了弹窗，但是由于父的容器加了特殊的css，导致我们弹窗的position:fixed受到了影响，不会以浏览器窗口为基准了，这就不
阅读全文
摘要：其它 API 【shallowRef 与 shallowReactive】 shallowRef 作用：创建一个响应式数据，但只对顶层属性进行响应式处理。用法： let myVar = shallowRef(initValue) 特点：只跟踪引用值的变化，不关心值内部的变化 shallowReact
阅读全文
摘要：【slot】 插槽：简单说就是父组件内部使用了子组件，但是子组件内部某些结构需要使用者自行定义，此时就需要用到插槽实现 默认插槽 默认插槽的name是default 父组件 <template> <div> <Child> <h3>默认插槽</h3> </Child> </div> </templa
阅读全文
摘要：组件通信 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 fro
阅读全文
摘要：1. 路由 【对路由的理解】 【基本切换效果】 Vue3中要使用vue-router的最新版本，目前是4版本路由配置文件代码如下： // 创建一个路由器，并暴露出去 // 第一步：引入createRouter import { createRouter, createWebHistory } fro
阅读全文
摘要：1. 生命周期 概念： Vue组件实例在创建时要经历一些列的初始化步骤，在此过程中vue会在合适的时机，调用特定函数，从而让开发中有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子规律： 生命周期整体分为四个阶段：分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后 Vue
阅读全文
摘要：1. 标签的ref属性 作用：用于注册模板引用 用在普通DOM标签上，获取的使DOM节点用在组件标签上，获取的是组件实例对象 用在子组件上，父组件想要访问子组件内的数据，需要使用defineExpose暴露 用在普通DOM标签上： <template> <div> <h2>哈哈</h2> <h2 r
阅读全文
摘要：1. computed计算属性 作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。 2. watch监视与watchEffect 1. watch 作用：监视数据的变化（和Vue2的watch作用一致）特点：Vue3中的watch只能监视以下4种数据： ref定义的数据rea
阅读全文
摘要：1. ref和reactive ref创建：基本类型的响应式数据 作用：定义响应式变量语法：let xxx = ref(初始值)返回值：一个RefImpl的实例对象，简称ref对象或ref,ref对象的value属性是响应式的注意点： JS中操作数据需要xxx.value,但模板中不需要.value
阅读全文
摘要：1. OptionsAPI与CompositionAPI Vue2的API设计是Options(配置)风格的Vue3的API设计是Composition(组合)风格的 Options API的弊端： Options类型的API，数据、方法、计算属性等，是分散在：data、methods、comput
阅读全文
摘要：var code = "1eb2e489-da58-4ba7-a381-f06cdebe7f2d" 1. Vue3简介 性能的提升 打包大小减少41%初次渲染快55%，更新渲染快133%内存减少54% 源码的升级 使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree
阅读全文
