随笔分类 - Vue
摘要：可能很多同学（包括我）刚上手 Vue 3.0 之后，都会觉得开发过程似乎变得更繁琐了，Vue 官方团队当然不会无视群众的呼声，如果你基于脚手架和 .vue 文件开发，那么可以享受到更高效率的开发体验。 在阅读这篇文章之前，需要对 Vue 3.0 的单组件有一定的了解，如果还处于完全没有接触过的阶段，
阅读全文
摘要：1. 建立hook文件夹，在hook文件夹里面建立 useAxios.ts 文件，内容如下： import { ref } from 'vue'; import axios from 'axios'; export default function<T>(url: string, method: s
阅读全文
摘要：在vue2中我们已经使用过provide和inject来实现祖孙组件之间的数据传递，但是在vue3中由于我们使用setup，此时我们应该如何去使用provide和inject函数呢？ 在vue中帮我们提供了provide和inject的函数，我们可以直接在setup函数中使用即可。 一、provid
阅读全文
摘要：1、watch需要明确监听哪个属性2、watchEffect会根据其中的属性，自动监听其变化3、watcheffect初始化时，一定会执行一次（收集要监听的数据，不然不知道监听的是什么），watch只有你设置了初始化监听才会监听 作者：时间的溺水者链接：https://www.jianshu.com
阅读全文
摘要：import { ref, reactive } from 'vue', // setup(){ const mydata = ref({ n: 10, arr: [1,2,3], obj: { name: 'zs', age: 18 } }) const mydata = reactive({ n
阅读全文
摘要：前置环境： 1. 手写h函数 vnode.js // 默认暴露 export default function(sel, data, children, text, elm) { return { sel, data, children, text, elm } } h.js import vnod
阅读全文
摘要：方案一：通过ref直接调用子组件的方法 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child fro
阅读全文
摘要：一、双向数据绑定（响应式）原理 1. Vue2中的绑定 vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。 new Vew({ data:{ n: 0 } //n被隐藏，外界不能直接使用 //给n添加get s
阅读全文
摘要：https://blog.csdn.net/weixin_46022934/article/details/121866009?ops_request_misc=&request_id=&biz_id=102&utm_term=transion%E5%8A%A8%E7%94%BB%E5%85%B7%
阅读全文
摘要：分享链接： https://cn.vuejs.org/v2/guide/custom-directive.html
阅读全文
摘要：hash模式： 使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页应用当#后面的hash发生变化时,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作
阅读全文
摘要：Key是dom用来做 diff算法比较用的，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素，但index不是对象的唯一标识，例如删除数组的时候，部分数据的index都要发生变化，要重新渲染一次，影响了性能，有时还会产生bug，不
阅读全文
摘要：挂载阶段 该过程主要涉及 beforeCreate、created、beforeMount、mounted 4 个钩子函数。执行顺序为：父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeM
阅读全文
摘要：1、computed和watch区别？ watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。 computed: 计算属性是
阅读全文
摘要：beforecreate : 可以在此阶段加loading事件，在加载实例时触发； created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用； mounted : 挂载元素，获取到DOM节点； updated : 如果对数据统一处理，在这里写上相应函数；
阅读全文
摘要：1. 新建 axios.js （可自定义）文件，对 axios 进行二次封装 // axios.js // 对 axios 进行二次封装 import axios from 'axios' // 引入进度条及其样式 import nprogress from 'nprogress' import '
阅读全文
摘要：一、vuex基本使用 1. 安装 npm i vuex -S 2. 导入 并 使用到项目中 import Vuex from 'vuex' vue.use(Vuex) 3. 创建 store 对象 const store = new Vuex.Store({ state:{ count = 0 }
阅读全文
摘要：一、什么是指令 开始之前我们先学习一下指令系统这个词 指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力 在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统 我们看到的v-开头的行内属性，
阅读全文
摘要：一、修饰符是什么 在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号 在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理 vue中修饰符分为以下五种： 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-
阅读全文
