![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 84
loushumei
这个作者很懒,什么都没留下…
展开
-
Vue性能「十九」-- Vue常见性能优化方式 ***
合理使用v-show和 v-if合理使用computed(缓存)v-for中加key,避免和v-if同时使用自定义事件和DOM事件及时销毁(否则会导致内存泄露)合理使用异步组件(import)合理使用缓存组件(keep-alive)合理使用异步渲染($nextTick)data层级不要太深(导致深度监听时递归的次数比较多)使用vue-loader在开发环境做模板编译(预编译)使用SSR(服务端渲染)1.合理使用v-show和 v-ifv-show和 v-if的区别:v-show.原创 2021-01-12 19:00:01 · 600 阅读 · 0 评论 -
Vue原理「十八」-- computed和watch的区别及原理 ***
计算属性 computedcomputed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理场景:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化,这里的这个总金额使用computed属性来进行计算是最好的选择。(适合多对一的场景)多对一的场景使用:<p>{{luFei_Name}}</p>vm = n转载 2021-01-12 18:55:22 · 415 阅读 · 0 评论 -
Vue3.0「十七」-- vue3.0升级新特性及Proxy重写响应式讲解
vue3.0 升级内容全部用TS重写的(响应式、vdom、模本编译)性能提升,减少代码量会调整部分APIProxy重写响应式vue2.x 马上要过时了吗vue3.0从正式发布到推广,还需要一段时间vue2.x应用范围广,有大量项目需要维护升级proxy存在兼容性问题,且不能ployfill社区热门知识点:Proxy重写响应式讲解回顾vue2.*的响应式原理 [object.defindeProperty]object.defindeProperty缺点:深度监听需要一次性递归无法原创 2021-01-04 20:24:42 · 706 阅读 · 0 评论 -
Vue状态管理模式「十六」-- Vuex***
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。一个状态管理实例const store = new Vuex.Store({ state: { count: 0, todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ] }, gette原创 2020-11-17 21:46:10 · 187 阅读 · 0 评论 -
Vue路由「十五」-- vue-router的路由模式***
vue-router的路由模式有 hash模式 和 history模式,默认使用 hash 模式hash模式:使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。例如 http://yoursite.com/#/user/idhistory 模式:URL 就像正常的 url,例如 http://yoursite.com/user/id前置知识:网页url组成部分https://127.0.0.1:8082/lesson/419.html?a=100&am原创 2020-11-17 20:59:41 · 315 阅读 · 2 评论 -
Vue原理「十四」-- 组件渲染过程***
1.初次渲染过程解析模板为render函数(或在开发环境中已完成,vue-loader)触发响应式,监听data属性的getter setter执行render函数,生成vnode, patch(elem,vnode)2.更新过程修改data,触发setter(此前getter中已被监听)重新执行render函数,生成newVnodepatch(vnode,newVnode)每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依原创 2020-11-16 19:11:21 · 656 阅读 · 0 评论 -
Vue原理「十三」-- 模板编译 *****
前置知识:JS的 with 语法vue template complier将模板编译为render函数执行render函数生成vnodevnode可以渲染到浏览器的DOM元素上vnode可以在组件修改后触发更新1、with语法const obj ={a:100,b:200}console.log(obj.a) //100console.log(obj.b) //200console.log(obj.c) //undefinedwith(obj){ console.log(.原创 2020-11-16 14:14:43 · 226 阅读 · 0 评论 -
Vue原理「十二」-- vdom和diff算法 *****
diff 算法概述diff即对比,是一个广泛的概念,如linux diff、git diff两个JS对象也可以做diff两颗树做diff,如vdom diff树diff 时间负责度是o(n^3)第一,遍历tree1;第二,遍历tree2第三,排序1000个节点,要计算 1亿次,算法不可用优化时间复杂度到o(n)之比较同一级,不跨级比较tag不相同,则直接删掉重建,不再深度比较tag和key两者都相同,则认为是相同节点,不再深度比较patchVnode()diff算法总结pa原创 2020-10-30 19:21:48 · 469 阅读 · 0 评论 -
Vue原理「十一」-- 响应式原理 *****
Vue响应式:组件data数据一旦变化,立刻触发视图的更新1. 核心API - Object.defineProperty基本用法const data={}var name='zhangsan'Object.defineProperty(data,"name",{ get:function(){ console.log('get') return name }, set:function(newVal){ console..原创 2020-10-30 19:02:39 · 257 阅读 · 0 评论 -
Vue原理「十」-- 组件化和MVVM ***
组件化很久以前的组件化:asp jsp php 已经有组件化了nodejs 中也有类似的组件化传统组件,只是静态渲染,更新还要依赖于操作DOM现在的组件化:数据驱动视图 -Vue MVVM数据驱动视图 -React setStateMVVM 数据驱动视图 *****view 视图-DOMModel 模型-vuex的数据viewModel 监听事件、监听指令,在视图和数据绑定器之间进行通信。...原创 2020-10-30 19:01:41 · 330 阅读 · 0 评论 -
Vue高级特性「九」-- mixin 混入
vue中提供了一种混合机制–mixins,用来更高效的实现组件内容的复用mixin使用实例index.vue 引入了mixin.js<template> <div> {{name}} {{major}} {{city}} <button @click="showName">点击</button> </div></template><script>import myMixin from '原创 2020-10-29 21:14:48 · 173 阅读 · 0 评论 -
Vue高级特性「八」--keep-alive 缓存组件 ***
keep-alive是什么keep-alive用于保存组件的渲染状态。keep-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,避免组件反复创建和渲染。应用场景频繁切换,不需要重复渲染(tab切换),如果标签简单可以使用 v-showVue性能优化方法之一在动态组件中的应用例如:点击事件,切换不同的子组件<button @click="state ='A'">A</but原创 2020-10-29 20:58:30 · 263 阅读 · 1 评论 -
Vue高级特性「七」--动态组件\异步组件***
使用场景:需要根据数据(新闻详情页),动态渲染的场景,即组件类型不确定。基本使用<component :is="nextTickName"></component>import nextTick from './nextTick'export default { components:{ nextTick, }, data() { return { nextTickName:"nextTick" }; }, };原创 2020-10-27 22:04:59 · 174 阅读 · 0 评论 -
Vue高级特性「六」--slot 插槽
基本使用父组件在引用的子组件中添加内容<slotDemo :url="website.url"> {{website.title}} //父组件添加的内容</slotDemo>data() { return { website:{ url:'http://www.baidu.com', title:'百度', }, };},子组件 slotDemo.vue<template> <div>原创 2020-10-27 21:15:36 · 256 阅读 · 0 评论 -
Vue高级特性「五」--$nextTick
$nextTickdata改变之后,DOM不会立刻渲染,获取不到最新的DOM节点;$nextTick会在DOM渲染之后被触发,以获取最新DOM节点<template> <div> <ul ref="ul1"> <li v-for="(item,index) in list" :key="index">{{item}}</li> </ul> <button @click="add">原创 2020-10-24 22:51:37 · 188 阅读 · 0 评论 -
Vue高级特性「四」--自定义 v-model
父组件 index.vue<p>{{name}}</p><CustomVmodel v-model="name" />子组件 CustomVmodel.vue<template> <div> <input type="text" :value="text1" @input="$emit('change1',$event.target.value)" > <!--原创 2020-10-24 22:30:05 · 188 阅读 · 0 评论 -
vue基础「三」--组件生命周期
单个组件的生命周期挂载阶段beforeCreatecreated: new vue的实例初始化完,网页还没开始渲染deforeMountmounted :网页已经渲染完了更新阶段beforeUpdateUpdated销毁阶段beforeDestroy 解除绑定 销毁子组件以及事件监听器destroyed 销毁完成父子组件生命周期父组件:index.vue子组件:list.vue挂载阶段:index createdlist createdlist mountedind原创 2020-10-24 21:56:08 · 378 阅读 · 0 评论 -
vue基础「二」--组件间的通讯
1. 父子组件通讯:props 和 $emit父组件 index.vue给子组件 Input 传递事件 addHandler给子组件 List 传递数据list、事件 deleteHandler<template> <div> //传递 addHandler事件 <Input @add="addHandler"/> //传递 list数据、deleteHandler事件 <List :listFather="list"原创 2020-10-24 17:02:48 · 201 阅读 · 0 评论 -
Vue基础「一」-- 基本使用
1. 插值、指令(模板)//模板 1.插值、表达式、 <p>文本插值:{{message}}</p> <p>JS表达式{{flag?'yes':'no'}}(只能是表达式,不能是js语句)</p> 2.指令、动态属性 <p :id="myId">动态属性</p> 3.v-html:会有XSS风险,会覆盖子组件 <p v-html="myhtml">原创 2020-10-24 16:05:37 · 208 阅读 · 0 评论