![](https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue
Lvan的前端笔记
十年磨一剑
展开
-
vue:实现简单的拖拽功能
简单的拖拽功能原创 2023-05-29 17:58:38 · 3561 阅读 · 0 评论 -
vue2/3:环境变量与模式
在公司实际中环境变量怎么使用的原创 2023-03-16 17:56:39 · 1064 阅读 · 0 评论 -
vue3:详解组合式函数
vue3的核心-组合式函数原创 2023-02-15 18:19:27 · 539 阅读 · 0 评论 -
vue3:组件如何通过v-model绑定数据
vue3:组件如何通过v-model绑定数据原创 2023-02-15 17:44:48 · 1010 阅读 · 0 评论 -
vue3:组件注册
vue3:组件注册原创 2023-02-15 17:19:40 · 243 阅读 · 0 评论 -
vue3:通过ref调用子组件的方法
vue3:通过ref调用子组件的方法原创 2023-02-15 17:00:35 · 3854 阅读 · 0 评论 -
vue3:watch与watchEffect的区别
watch的基本使用与watchEffect原创 2023-02-15 16:50:30 · 328 阅读 · 0 评论 -
vue3:组件通过绑定对象来绑定属性
新学到的组件透传的方法原创 2023-02-15 15:36:25 · 1469 阅读 · 1 评论 -
vue:单文件的使用
vue2、vue3单文件的使用原创 2023-02-14 18:46:21 · 534 阅读 · 0 评论 -
vue3:加载本地图片等静态资源
vue3加载本地资源原创 2023-02-14 16:04:48 · 22539 阅读 · 3 评论 -
vue3:父子组件传值
Vue2+Vue3的组件间传值原创 2022-03-02 14:50:54 · 1574 阅读 · 0 评论 -
vite:配置ip访问
背景默认情况下 vite 不允许通过 ip 地址访问,只能通过 localhost。修改只需要修改 vite.config.ts,将 host 改为 0.0.0.0server:{ host: '0.0.0.0',}改完就可以看到了。改 vite 配置不需要重启服务哦~官方文档介绍:参考资料官方文档...原创 2022-02-15 17:45:26 · 12733 阅读 · 0 评论 -
vite:脚手架集合
https://github.com/vitejs/awesome-vite原创 2022-02-15 11:29:23 · 247 阅读 · 0 评论 -
vite:vue中引入图片报错require is not defined
问题在 vite 项目中这样引入图片报错images: require('../assets/images/right.png')改为images: new URL('../assets/images/right.png', import.meta.url).href具体原因看https://vitejs.cn/guide/assets.html#new-url-url-import-meta-url参考资料https://blog.csdn.net/sqf251877543/articl原创 2022-01-17 16:21:57 · 3367 阅读 · 0 评论 -
vue3:vue中的h函数
语法// @returns {VNode}h( // {String | Object | Function | null} tag // 一个 HTML 标签名、一个组件、一个异步组件,或者 null。 // 使用 null 将会渲染一个注释。 // // 必需的。 'div', // {Object} props // 与 attribute、prop 和事件相对应的对象。 // 我们会在模板中使用。 // // 可选的。 {}, // {St原创 2022-01-16 21:28:18 · 11835 阅读 · 0 评论 -
vue系列:父子组件生命周期的执行顺序
结论父子组件加载过程->父beforeCreate -> 父created -> 父beforeMount->子beforeCreate -> 子created -> 子beforeMount -> 子mounted-> 父mounted子组件更新(父组件给子组件传入新的 props 时)->父beforeUpdate-> 子beforeUpdate -> 子updated-> 父updated父组件销毁原创 2021-06-09 14:40:04 · 412 阅读 · 0 评论 -
Composition API和React Hooks对比
Composition API和React Hooks前者 reactive + ref 比后者 useState 要难理解前者 setup 只会被调用一次,而后者函数会被多次调用前者无需 useMemo useCallback,因为 setup 只会调用一次前者无需顾虑调用顺序,而后者需要保证 hooks 的顺序一致...原创 2021-05-26 17:59:02 · 403 阅读 · 0 评论 -
vue系列:vue3为何比vue2快?
Proxy响应式PatchFlaghoistStaticcacheHandlerSSR优化tree-shakingPatchFlaghttps://vue-next-template-explorer.netlify.app该网站可以左边写vue template,右边看到被编译为什么函数编译模板时,动态节点做标记标记分为不同的类型,如 TEXT PROPSdiff 算法时,可以区分静态节点,以及不同类型的动态节点如图,之前的 diff 算法是做对比,现在优化后,加入.原创 2021-05-26 16:07:12 · 568 阅读 · 0 评论 -
vue3:setup中如何获取组件实例?
在 setup 和其他 Composition API 中没有 this可通过 getCurrentInstance 获取当前实例若使用 Options API 可照常使用 this代码说明import { onMounted, getCurrentInstance } from 'vue'export default { data () { return { x: 1 } }, setup () { // 这里打印出来undefined,setup里面没有this .原创 2021-05-23 21:35:08 · 14823 阅读 · 0 评论 -
vue3:watch和watchEffect区别
watch// 侦听一个 getterconst state = reactive({ count: 0 })watch( () => state.count, (count, prevCount) => { console.log('新的数据为', count) console.log('上一个数据为', prevCount) })// 直接侦听一个 refconst count = ref(0)watch(count, (count, prevCo原创 2021-05-23 20:41:56 · 241 阅读 · 0 评论 -
vue3:.sync代替v-model
如果你还不知道 vue2 中的 .sync 修饰符,可以看这里<html><head> <script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.min.js"></script></head><body> <div id="vue-sync"> <text-document :title="parentTitl原创 2021-05-23 20:08:47 · 1277 阅读 · 2 评论 -
vue3:Proxy如何实现响应式?
深度监听,性能更好可监听 新增/删除 属性可j监听数组变化总结Proxy 虽然规避了 Object.defineProperty 的问题,但是无法兼容所有浏览器,无法 polyfill原创 2021-05-23 15:04:46 · 145 阅读 · 0 评论 -
vue原理:模板被编译成什么
前置知识widthconst obj = { a: 1, b: 2}with (obj) { console.log(a) // 1 console.log(b) // 2 console.log(c) // 报错}主题模板编译为 render 函数,执行 render 函数返回 vnode基于 vnode 再执行 patch 和 diff使用 webpack vue-loader 会在开发环境编译模板const compiler = require('vue-tem原创 2021-05-06 21:57:51 · 655 阅读 · 0 评论 -
vue原理:vue中是如何监听数组变化?
我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后,调用的数组的push、splice、pop等方法改变数组元素时并不会触发数组的setter,这就会造成使用上述方法改变数组后,页面上并不能及时体现这些变化,也就是数组数据变化不是响应式的(对上述不了解的可以参考这篇文章)。但实际用vue开发时,对于响应式数组,使用push、splice、pop等方法改变数组时,页面会及时体现这种变化,那么vue中是如何实现的呢?答案是 vue 重写了数组的push、s原创 2021-05-05 14:00:48 · 1517 阅读 · 0 评论 -
vue3:Composition API
Composition API 属于高阶技巧,不是基础必会Composition API 是为了解决复杂业务逻辑而设计的Composition API 就像 Hooks 在 react 中的地位相关知识点reactiveref、toRef、toRefsreadonlywatch 和 watchEffectsetup生命周期钩子函数介绍reactive和ref都是 vue3 创建响应式对象的方式,相当于 vue2 的 data里面创建的数据,如果想要使用vue3 Compos.原创 2021-05-05 12:53:57 · 142 阅读 · 0 评论 -
vue3:从生命周期开始学习vue3
vue3比vue2有什么优势性能更好体积更小更好的 ts 支持(vue3用ts开发)更好的代码组织更好的逻辑抽离更多新功能vue3生命周期options API 和 Composition API选项式 APIHook inside setupbeforeCreateNot needed*createdNot needed*beforeMountonBeforeMountmountedonMountedbeforeUpdateonB原创 2021-05-04 13:56:25 · 129 阅读 · 0 评论 -
vue系列:动态组件&异步组件
动态组件:is="component-name" 用法需要根据数据,动态渲染的场景,即组件类型不确定。// 动态渲染了NextTickName这个组件<component :is="NextTickName" />import NextTick from './NextTick'export default { components: { NextTick }, data () { return { NextTickName: 'NextTick' }原创 2021-05-03 21:11:11 · 135 阅读 · 0 评论 -
vue系列:跳转同一个路由如何替换url后的参数
问题当我们 vue 想要跳转到同一个路由,比如当前在路由 A,并携带了参数,然后想要还在路由 A,但是后面的参数变化怎么办呢?解决只要不填 path 参数就会默认跳到当前路由上this.$router.replace({ query: { code: 12 }})比如你目前的 url 是 https://xxx.com?code=11,执行上面的命令就可以变为https://xxx.com?code=12当然你也可以用 push 代替 replace衍生方案npm in原创 2021-04-22 15:02:52 · 1583 阅读 · 0 评论 -
vue系列:鼠标划入增加类名
解决@mouseenter="enterBlock($event)"@mouseleave="leaveBlock($event)"enterBlock (event) { event.currentTarget.classList.add('active')},leaveBlock (event) { event.currentTarget.classList.remove('active')}复习js增加类名的方案1、setAttribute()document.getEl原创 2020-12-25 19:56:08 · 1348 阅读 · 0 评论 -
vue系列:跳转到同一个路由参数不同但是不触发更新的问题
在要跳到到的页面监听路由watch: { $route (to, from) { if (from.query.type) { console.log('拿到传来的query', from.query.type) } }}原创 2020-12-25 19:47:43 · 603 阅读 · 0 评论 -
vue系列:重置data中的值
场景我们提交完表单之后想要重置表单的数据,但是一个一个赋值又很麻烦,所以有了下面的方案。解决方法一(推荐)// 组件当前data对象this.$data// 组件初始化状态下的data对象this.$options.data()// 重置data对象到初始化状态Object.assign(this.$data, this.$options.data())// 重置data对象的表单数据到初始化状态Object.assign(this.$data.form, this.$options原创 2020-12-22 16:38:21 · 762 阅读 · 0 评论 -
vue系列:基于vue的h5/后台换肤功能
需求调研基于 vue 的 h5、后台换肤方案调研结果经过一些调研和以前的经验,大体分为两种方式:方式一:内置几种主题样式,通过更换类名来实现动态改变小程序页面的元素色值。优点:方便、改动少、适合主题样式变动不大的情况缺点:其实就是写死的值,每次改动主题就需要发布小程序方式二:后端接口返回主题色字段(或者通过js改变主题),前端通过内联方式将主题色挂在页面的根元素上。优点:方便定制主题,比如在后台配置一个主题前端立马生效、不用发版缺点:改动稍多方式三:通过 node 打包的方式,将原创 2020-12-08 14:47:18 · 1015 阅读 · 0 评论 -
vue系列:组件上使用v-model
语法糖普通的 v-model<input v-model="searchText">等价于<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">组件上使用 v-model<custom-input v-model="searchText"></custom-input>等价于<custom-input v-bind:va原创 2020-10-01 18:37:19 · 426 阅读 · 0 评论 -
vue源码解读系列(5):分析dom挂载阶段,了解$mount的实现
入口文件:这里先缓存了起来,const mount = Vue.prototype.$mount,这里的 Vue.prototype.$mount 是在 ./runtime/index 中定义的。这里是复用了 runtime only 版本初始化生命周期的一些代码,因为runtime only 版本是没有挂载 dom 的,所以要在这里重新写挂载dom的代码,如下:// src/platforms/web/entry-runtime-with-compiler.jsimport Vue from '.原创 2020-09-09 16:29:22 · 375 阅读 · 0 评论 -
vue源码解读系列(4):为什么通过this.xxx可以访问到data的数据
该页面 ctrl + F 搜索 下一个 来查看流程我们看看 new Vue 的时候发生了什么,我们为什么可以通过 this.xxx 访问到 data 中的数据。看源码要确立目标,想要看哪里的知识,就去看哪里,别的无关的函数就不要去看了,要不一个套一个,一会就给你看懵逼了分析1、vue的最初形态// src/core/instance/index.jsimport { initMixin } from './init'import { stateMixin } from './state'原创 2020-09-03 16:59:35 · 756 阅读 · 0 评论 -
vue系列:keep-alive缓存列表和详情页
做后台管理系统,我们常见的功能就是一个列表页,点击进入详情到详情页。详情页有个返回按钮,点击返回回到上一页(列表页)。一般做法:点击返回按钮的时候,直接 this.router.back(-1),这样回到列表页还是会重新调接口获取数据,而且当你在列表的第二页点击的某个详情,返回的时候就会返回的第一页,体验不好。目标效果:点返回的时候,直接无刷新返回上一页。keep-alive相关知识文档<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。当组件在 <原创 2020-09-01 18:10:05 · 1475 阅读 · 0 评论 -
vue源码解读系列(3):模板编译过程
版本用 vue/cli 的时候可能会问到要哪个版本版本一:runtime only版本二:runtime + compiler(运行时 + 编译器)编译器主要是把 template 模板编译成 render 函数,所以// 需要编译器new Vue({ template: '<div>{{hi}}</div>'})// 不需要编译器new Vue({ render (h) { return h('div', this.hi) }})因为在 vue2原创 2020-08-30 00:49:45 · 221 阅读 · 0 评论 -
vue源码解读系列(2):解读目录结构与整体设计
目录结构整体分析首先看 package.json"scripts": { "build": "node scripts/build.js"}执行 npm run build 会去执行 scripts/build.js 这个文件,而这个文件主要是拿到执行了 scripts/config.js 里的配置,生成不同版本的打包文件。// scripts/config.jsconst builds = { // Runtime only (CommonJS). Used by bundler原创 2020-08-30 00:41:06 · 171 阅读 · 0 评论 -
vue源码解读系列(1):认识flow与rollup
flow官方文档安装:npm install --save-dev flow-bin初始化:// 会生成一个 `.flowconfig` 文件flow init.flowconfig[ignore].*/node_modules/.*[include][libs][lints][options][strict]index.js// @flowfunction square(n: number) { return n * n;}square("2原创 2020-08-29 17:29:56 · 344 阅读 · 0 评论 -
vue系列:使用.env文件配置全局环境变量
这个是基于 vue/cli 脚手架的。文档挑重点说一说,其他的去看文档就行了根目录中的下列文件来指定环境变量.env # 在所有的环境中被载入.env.local # 在所有的环境中被载入,但会被 git 忽略.env.[mode] # 只在指定的模式中被载入.env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略一个环境文件只包含环境变量的“键=值”对:FOO=barVUE_APP_SEC原创 2020-08-17 10:56:03 · 2988 阅读 · 0 评论