vue学习
深入学习vue
一只大大大大狗
这个作者很懒,什么都没留下…
展开
-
vue3学习 4.toRaw
1.toRaw 获取原始数据不是引用关系 而是全等关系1.toRaw 从Reactive或Ref中得到原始数据 2.toRaw作用 做一些不想被监听的事情(提升性能) let obj ={name:'zs',age:19} /* ref/reactive数据类型的特点: 每次修改都会被追踪,都会更新UI界面,但是这样其实是非常消耗性能的 所以如果我们有一些操作不需要追踪,不需要更新UI界面,那么这个时候,原创 2021-06-25 18:05:07 · 16784 阅读 · 2 评论 -
vue3学习 3.递归监听和非递归监听
1.递归监听 1.递归监听 默认情况下,无论是通过ref还是reactive都是递归监听 递归监听是vue将对象包装成Proxy对象 里面的所有数据都能深度监听 2.递归监听存在的问题 如果数据量比较大,非常消耗性能 3.非递归监听 注意点: 如果是通过shallowRef创建的数据, 那么vue监听的是.value的变化 并不是第一层的变化.所以如果使用的是shallowRef的话 数据都不会有Proxy对象转化 4.应用场景 一般情况下我们是用ref和reactive即可原创 2021-06-23 19:01:15 · 364 阅读 · 1 评论 -
vue3学习 2.组合API
1.vue2的老旧模式数据放在data里面 但是操作数据的方法可能在methods或者computed或者watch里面 分开操作有点不合适2.vue3中新增setup方法setup函数时组合API的入口函数<template> <div> <p>{{count}}</p> <button @click="myFn">按钮</button> </div><原创 2021-06-23 17:32:05 · 298 阅读 · 1 评论 -
vue3对于vue2的提升 1,速度提升
vue3的六大亮点performance:性能比vue2提升1.2~2倍Tree shaking support:按需编译,体积比vue2更小composition API:组合API(类似react hooks)better typeScript suppert:更好的Ts支持custom renderer API:暴露了自定义渲染APIfragment,teleport(protal),msusoense:更先进的组件1.优化diff算法 vue2中的虚拟dom是进行全量的对比 htt原创 2021-06-22 19:00:46 · 606 阅读 · 0 评论 -
个人记录 es6 ...用法
es6的扩展运算符 … 可以对对象进行扩展运算 也可以对数组进行扩展运算1.对象的扩展运算 记住一句话对象的扩展运算符… 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中.let bar = { a: 1, b: 2 };let baz = { …bar }; // { a: 1, b: 2 }boject.assign 用于对象的合并 将原对象的所有可枚举属性复制到目标对象中.如果目标对象中与原对象有同名属性,活多个源对象有同名属性,则后面的属性会覆盖前面的属性,同样,如果用户自定义原创 2021-02-04 16:48:47 · 114 阅读 · 0 评论 -
记一次多文件上传 使用element框架的实例 不显示进度条 提交按钮自己控制
效果文件上传的时候未完成不允许提交表单 显示上传进度(不能覆盖element不然没有上传进度条)上代码<el-upload :on-progress="handleprogress" class="upload-demo" action="https://www.chineseafs-tc.org.cn/cky-rest/upload/upload"原创 2020-11-20 17:51:44 · 621 阅读 · 0 评论 -
需要循环中的异步请求返回结果全部完成后进行后续逻辑
实际场景中 碰到一个问题 就是在一个数组中进行循环 当满足某些条件时进行异步请求 然后把请求返回的数据进行拼接 然后进行后续操作 如果单纯的在for循环里面进行 就会出现 有的数据还未完全返回 但是已经进行了后续逻辑操作 这时候需要个小技巧 递归进行循环 直到所有数据加载完成才后续进行下列代码的for循环套for循环比较恶心 因为需求比较奇葩 所以就不多说了…//递归异步请求 直到所有请求都完毕 然后掉后续借口 不然数据会混乱 querylist(i, element) { if (i原创 2020-10-26 11:41:45 · 1477 阅读 · 0 评论 -
vue 使用qiniu上传文件到七牛服务器(视频 文件 图片.) 带有真实进度条展示 切记下载最新版qiniu-js!!!!!!!!!!!!!!!!!
**切记下载最新版qiniu-js!!!**需求效果html代码 <div class="f2-sub_btn"> <van-button type="primary" block> <span>开始录制视频</span> <input type="file" accept="原创 2020-10-16 10:36:55 · 933 阅读 · 0 评论 -
vue 使用视频流 formdata上传视频文件 并且限制视频大小 格式
需求代码<div class="f2-sub_btn"> <van-button type="primary" block> <span>开始录制视频</span> <input type="file" accept="video/*" clas原创 2020-09-29 10:54:30 · 2143 阅读 · 0 评论 -
js 图片转base64码后 再对base64码进行压缩 然后传给后台 无限压缩 直到符合输出码率
kejiang 1 html <div> <img :src="url" alt class="el-upload-list__item-thumbnail" />原创 2020-09-29 10:49:37 · 495 阅读 · 0 评论 -
vue中图片转化base64
需求页面直接上代码 //上传图片信息保存在数组中并且回显 change(event) { let file = event.target.files[0]; let windowURL = window.URL || window.webkitURL; //图片格式为PNG或JPG且小于5M if ( /\.(jpg|jpeg|png|JPG|JPEG|P原创 2020-09-22 14:42:49 · 1928 阅读 · 0 评论 -
vue中使用mixins异步方法获取参数的获取
当混合里面包含异步请求函数,而我们又需要在组件中使用异步请求函数的返回值时,我们会取不到此返回值,如下:mixin中组件中控制台解决方案:不要返回结果而是直接返回异步函数mixin中组件中控制台...转载 2020-09-03 09:56:31 · 2102 阅读 · 3 评论 -
vue中mixins使用原理详解
混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。1.把要用的方法抽出来 写一个js 然后暴露出去 里面的参数以及this 都相当于组件注入 可以全局调用import { mapActions, mapState } from "vuex";export default { props: ["itemdata"], data() { return原创 2020-09-03 09:50:44 · 4157 阅读 · 1 评论 -
VUE复习深入学习13.深入响应式原理,底层探究
数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。如何追踪变化当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”原创 2020-06-08 17:34:35 · 146 阅读 · 0 评论 -
VUE复习深入学习12.状态管理 VUEX 服务端渲染
状态管理简单状态管理起步使用经常被忽略的是,Vue 应用中原始 data 对象的实际来源——当访问数据对象时,一个 Vue 实例只是简单的代理访问。所以,如果你有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享:var sourceOfTruth = {}var vmA = new Vue({ data: sourceOfTruth})var vmB = new Vue({ data: sourceOfTruth})重要的是,注意你不应该在 action 中原创 2020-06-08 17:02:49 · 148 阅读 · 0 评论 -
VUE复习深入学习11.渲染函数 & JSX
渲染函数 & JSX节点、树以及虚拟 DOM<div> <h1>My title</h1> Some text content <!-- TODO: Add tagline --></div>当浏览器读到这些代码时,它会建立一个“DOM 节点”树来保持追踪所有内容,如同你会画一张家谱树来追踪家庭成员的发展一样。上述 HTML 对应的 DOM 节点树如下图所示:每个元素都是一个节点。每段文字也是一个节点。甚至注释也原创 2020-06-08 14:45:55 · 222 阅读 · 0 评论 -
修饰符.sync的用法
一个组件上只能定义一个v-model,如果其他prop也要实现双向绑定的效果该怎么办呢? 简单的方法是子组件向父组件发送一个事件,父组件监听该事件,然后更新prop。具体如下:// info.vue组件定义了一个value 属性, 和一个valueChanged事件<template> <div> <input @input="onInput" :value="value"/> </div></template>原创 2020-06-08 10:46:02 · 508 阅读 · 0 评论 -
VUE复习深入学习10.可复用性 & 组合 mixin!!!!!!
混入基础混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。选项合并当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。var mixin = { created: functio原创 2020-06-05 14:43:34 · 355 阅读 · 0 评论 -
VUE复习深入学习09.过渡&动画
进入/离开 & 列表过渡单元素/组件的过渡Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点<transition name="fade"> <p v-if="show">hello</p> </transition>.fade-enter-active, .fade-leave-activ原创 2020-06-04 11:04:41 · 134 阅读 · 0 评论 -
VUE复习深入学习08. 动态组件&异步组件 以及一些注意事项!
在动态组件上使用 keep-alive我们之前曾经在一个多标签的界面中使用 is attribute 来切换不同的组件<component v-bind:is="currentTabComponent"></component>当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。你会注意到,如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vu原创 2020-06-03 15:47:48 · 187 阅读 · 0 评论 -
组件深入学习
01.组件注册组件名:两种格式Vue.component('my-component-name', { /* ... */ })Vue.component('MyComponentName', { /* ... */ })全局注册的话使用 Vue.component .注册之后任何新创建的Vue实例都可使用.在所有子组件中也是如此,也就是说这三个组件在各自内部也都可以相互使用。Vue.component('my-component-name', { // ... 选项 ...})n原创 2020-06-03 14:10:19 · 124 阅读 · 0 评论 -
VUE复习深入学习07.组件的基础使用方法
1,数据 单个根元素当构建一个 组件时,你的模板最终会包含的东西远不止一个标题:Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <div v-html="post.content"></div> </div> `原创 2020-05-29 17:32:44 · 105 阅读 · 0 评论 -
VUE复习深入学习06.事件处理上的修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。.stop.prevent.capture.self.once.passive<!-- 阻止单击事件继续传播 -->原创 2020-05-29 16:12:34 · 126 阅读 · 0 评论 -
VUE复习深入学习05.条件渲染中的小细节 v-if key v-show v-for
用 key 管理可复用的元素Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换:<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"></template>原创 2020-05-29 15:49:32 · 166 阅读 · 0 评论 -
VUE复习深入学习04.修饰符的使用 计算属性和侦听器
1 .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()相当于写在方法里面了一个event.preventDefault();//禁用浏览器默认事件 阻止了默认事件 form表单的提交 所以页面没刷新<form v-on:submit.prevent="onSubmit">...</form> //不会刷新页面 onSubmit(data,event){ ev原创 2020-05-28 18:38:06 · 93 阅读 · 0 评论 -
VUE复习深入学习03.条件渲染,列表渲染,事件绑定
1,新增v-else-if 指令 和v-if一起使用v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行转载 2020-05-27 14:46:41 · 105 阅读 · 0 评论 -
VUE复习深入学习02.基础变量和修饰符的使用
vue中js变量的运用{{ number + 1}}{{ok ? 'YES' : 'NO'}}{{ message.split(' ').reverse( ).join(' ') }}<div v-bind:id=" 'list-' + id "></div>请注意:这里每个绑定都只能包含单个表达式,所以下面的例子都不会生效.{{ var a = 1}}{{ if (ok) {return message}}}<div v-bind:id=" 'list-'原创 2020-05-26 19:20:01 · 114 阅读 · 0 评论 -
VUE复习深入学习01.生命周期
vue的生命周期实例就是var vm = new Vue({ el:"#app", data:{ msg:"hello word" } })//在实例初始化之后,数据观测(data observer)和event/watcher 事件配置之前被调用。beforeCreate:function(){}//在实例创建完成后被立即调用在这一步,实例已完成以下配置:数据观测(data observer),属性和方法的运算。watch/event 事件回调。然而,挂在阶段还没开始,$e原创 2020-05-25 17:10:29 · 102 阅读 · 0 评论