Vue
Lsx~
快乐才是真谛。
展开
-
手撕Vue2和Vue3响应式原理
object.defineProperty缺陷:1、通过数组下标添加元素,无法触发setter。2、监听数组的push,pop,shift,unshift,splice,sort,reverse方法或者改变length无法触发setter。—>重写数组方法3、无法检测到对象属性的新增或删除 —>Vue.$set4、不管data中的对象层级有多深,都需要遍历每个属性,为每一个属性添加object.defineProperty。—>性能问题Vue2响应式:// 获取数组的原型原创 2021-11-14 20:36:10 · 661 阅读 · 1 评论 -
关于Vue中main.js通常定义的东西、项目中的全局配置等等
main.js:// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.// import Vue from 'vue';// import App from './App';// import router from './router';// import Element转载 2021-09-10 11:55:02 · 775 阅读 · 0 评论 -
大三实训,我用Nodejs和Vue3以及Typescript做了一个关于医院的后台管理系统 ❥(^_-)
已经大概有一个多月没有写博客了,最近一直在准备考研,所以时间有些紧张,今天特意拿出一下午时间来回忆回忆前端知识。今天就拿我在6月份所实训的后台管理项目来说一说。毕竟离上次写前端代码已经有很长时间了,有点想念啊~~~哈哈哈。还请各位允许我在这里吹个小小的牛逼,毕竟这是我人生中的第一个小小的全栈小项目。废话不多说——始于前端,而不局限于前端,开搞!项目:医院CMS(前后端分离)项目简述:此项目为我的一个实训项目,是关于医院的一个后台管理系统,当时实训老师用到的后端技术是Java、JDBC、jsp、ser原创 2021-08-13 18:27:34 · 5278 阅读 · 35 评论 -
Vue3警告:[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component
在Vue3中组件通信中(子传父)报出如下警告:[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a compon原创 2021-07-06 22:02:28 · 15763 阅读 · 5 评论 -
Vue3中axios如何使用路由(useRouter)以及自定义hooks中使用useRouter报错问题(已踩坑)
随着vue3的更新,vue-router也更新到了4.xuseRouter相当于vue2的this.$router全局的路由实例,是router构造方法的实例useRoute相当于vue2的this.$route表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route路由记录但是在一次使用中发现useRoute, useRouter必须写到setup中,详见Vue路由强行在函数中使用这两会报undefined,导致无法获取路由数据和路由方法那么想要在原创 2021-06-05 22:59:31 · 5366 阅读 · 7 评论 -
Vue3警告[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance.
在Vue3中使用watch监听useRoute()的时候,控制台报出警告:[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.watch(route)是隐式的deep:true,它遍历任意深度的属性。所以从技术上来说,这是预期的行为。另外,当您只原创 2021-05-24 13:07:02 · 23634 阅读 · 1 评论 -
TypeScript泛型及其一些写法
Vue3拥抱Typescript之泛型// 平常写ts可能会这样注解类型,但是这样有些麻烦,能不能简洁点呢//function joi(first: string | number,second: string | number){// return first + second//}// JJ是泛型,在最简单的泛型用法中可以类比形参理解,所以它可以是任意值// 但一般用T表示function joi<JJ>(first: JJ,second: JJ){ return first转载 2021-05-16 09:07:00 · 209 阅读 · 0 评论 -
通过Vuex实现Input双向绑定
store.js:store = new Vuex.store({ state:{ inputVal: '' }, mutations:{ setInput (state, newVal) { state.inputVal = newVal } } }) 页面中绑定:<template> <div> <input v-model = 'storeVal'> &.原创 2021-04-16 15:01:35 · 456 阅读 · 0 评论 -
vue中keep-alive,include的缓存问题(玩好keep-alive)
前提:有A,B,C,D四个页面,A是按钮页(点击按钮进入B页面),B是订单列表页,C是订单详情页,D是费用详情页需求:顺序是A->B->C->D,每次都刷新页面,D->C->B时走缓存,但是每次从A到B都要刷新B页面,从B到C需要刷新C页面,从C到D要刷新D页面在vue官方文档2.1以上有include 和 exclude 属性允许组件有条件地缓存。在这里主要用include结合vuex来实现(四个页面组件都有自己的name才会生效,这里name就叫A,B,C,D)从D-原创 2021-03-25 12:11:08 · 989 阅读 · 0 评论 -
Vue报错[Vue warn]: Error in render: “TypeError: “checkedCount“ is read-only“
写vue时报出这样一个错误,某个东西是只读的;报错原因:我在用一个变量的时候,我居然是用const声明的,真不细心。声明变量用let,常量用const;复习一下let和const:1.let(1)不存在变量提升(必须先声明后使用),声明的变量只在所处的块级内有效(2)暂时性死区(3)变量不能重复声明(4)不影响作用域链2.const(1)声明常量(一般大写),并且一定要赋初始值(2)同一个作用域内常量值不可以修改(3)块级作用域(4)对于数组和对象的元素修改,不算作对常量的修改..原创 2021-03-17 17:28:40 · 4115 阅读 · 0 评论 -
Vue中解决better-scroll的滚动问题以及刷新页面better-scroll不起作用问题
不得不说better-scroll是个很好用的第三方框架,但是使用恰当才能发挥它强大的功能哦!具体使用步骤请移步→better-scroll链接Github但是better-scroll用的恰当的话并不会出现在手机上滚动不了的情况具体问题:1.使用的时候为什么滚动不起作用首先在在你引入better-scroll成功之后,你的html结构应该如下:<div ref="wrapper" class="wrapper"> <div class="content"></di原创 2021-03-10 22:11:59 · 2742 阅读 · 0 评论 -
Vue报错:NavigationDuplicated: Avoided redundant navigation to current location(提示这是到当前位置的冗余导航)
今天在做电影app时,需求是:有一个长列表,当我们滑动后,进入了另外一个页面之后在返回列表页时,会依旧保持我们第一次滑动的位置。看图:解决方法:在router.js(由于配置不同,或许有些人需写在router/index.js)中写入以下代码:import Router from 'vue-router';const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) {原创 2021-03-02 14:45:48 · 759 阅读 · 1 评论 -
Vue中作用域插槽的妙用
昨天在学后台管理项目的时候遇到了有趣的东西-----作用域插槽为什么scope.row可以获得本行的数据,说明这个大神在封装组件的时候,用了一个插槽<slot :row=data></slot>话又说回来,什么是作用域插槽:当我们在封装组件的时候,要使用作用域插槽,必然会往里面传个slot,通过这个插槽往外面传递数据,我们只需要在此插槽上绑定一个动态属性,然后把数据赋值给这个动态属性(我这里是:data=“PLanguage”),之后我们在使用组件是,或使用其他人封装好的组件原创 2021-02-19 11:20:05 · 468 阅读 · 0 评论 -
Vue购物车(全选和全不选)
效果如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table {原创 2021-02-17 10:14:23 · 733 阅读 · 0 评论