随笔分类 - vue
摘要：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
阅读全文
摘要：1. 介绍 理解： 一个路由（route）就是一组映射关系（key-value）, 多个路由需要路由器（router）进行管理前端路由： key是路径,value是组件，通俗的将就是通过一个路径key，可以访问vue的组件，实现组件的访问与跳转以及传参 2. 基本使用 安装vue-router, 命
阅读全文
摘要：1. vuex是什么 概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。这个怎么理解呢？可以暂时理解成全局事件总线、消息订阅与发布一样的道理，把vuex当成是外部的一个储存空间
阅读全文
摘要：1. nextTick下一次更新结束后执行指定的操作 语法： this.$nextTick(回调函数)作用：在下一次DOM更新结束后执行其指定的回调什么时候用： 当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行 举个栗子：例子中有updated生命周期和
阅读全文
摘要：写在最前：父组件引用子组件，如何能在应用子组件内容的同时，还能在自定义内容呢？ 1. 插槽 作用： 让父组件可以向子组件指定位置插入html结构，也是一种组件通信的方式，适用于父组件 >子组件分类： 默认插槽，具名插槽，作用域插槽使用方式： 默认插槽 父组件中： <MyContainer> <div
阅读全文
摘要：抛出问题:我们多级组件，或者任意不想关的子组件如何传递数据呢？ 1. 全局事件总线（$bus） 一种组件间通信的方式，适用于任意组件间通信 全局事件总线示意图： 安装全局事件总线： new Vue({ .... beforeCreate(){ Vue.prototype.$bus = this //
阅读全文
摘要：1. 组件传值 组件化编码流程： 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 一个组件在用，放在组件自身即可一些组件在用，放在他们共同的父组件上（状态提示） 实现交互：从绑定事件开始 props适用于： 父
阅读全文
摘要：1. ref属性 被用来给元素或子组件注册引用信息（id的替代者）应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（VC（VueComponent））使用方式： 打标识<h1 ref="xxx">.....</h1>或者<School ref="xxx"></School>
阅读全文
浙公网安备 33010602011771号