摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中
1、vue中的过渡、动画效果
单组件（
v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。
(定义了过渡名称，可用过渡名代替前缀v）
v-enter-active和v-leave-active体现可见的主要状态，可在此添加主效果；
v-enter是过渡的最开始状态，v-leave-to是结束的状态，可在此添加开始和结束的状态。
过渡模式
in-out(先进入，旧元素再消失),out-in(旧元素先消失，新元素再进入)
列表（
2、功能插件
①vue-lazyload(图片懒加载)
②mint-ui/vux(轮播图，各种弹框、提示框）
③vue-matomo(前端统计，使用做记录浏览量)详细链接：https://www.cnblogs.com/heior...
④vue-infinite-scroll（无限加载）
⑤fastclick(移动端click事件延迟问题)
npm install fastclick --save
impor Fastclick from "fastclick"
Factclick.attach(document.body);
3、数据和渲染
组件以templete形式来渲染，开始遍历data中的数据，mounted时挂载虚拟DOM。
通过设置getter和setter追踪更新，只有在data中定义的数据才能被跟踪更新，数组元素发生变化不能追踪，对象的属性可以(watch-deep:true)。
computed中的数据在mounted后触发计算，起始不进行watch监听，只有监听数据发生变化时才触发监听函数（监听函数先于computed触发）
DOM的异步更新。vue实例中，可追踪数据发生变化时，vue会开启一个队列，把变化记录其中，在下一次事件循环tick前，进行去重优化，然后重新渲染DOM。有时我们需要在DOM渲染之后再执行以下操作，比如DOM操作（渲染前执行会出错情况下），需要特殊处理vue.nextTick(callback)，则可以在本轮tick中操作，在下一轮tick时，DOM渲染完执行。
4、vue-router使用及路由原理解析
路由的分类：前端路由和后端路由。早起路由是后端负责，随着前端复杂程度的上升以及前后端分离的普及，后端路由缺点逐渐明显，依赖网速、用户体验差、前后端耦合，后端路由逐渐消失。
前端路由模式：hash模式和history模式。哈希模式是最早的路由模式，优点是兼容低版本，缺点是url中带#，不美观，某些情况下不会刷新。history模式是HTML5标准新增的API，出兼容低版本外可弥补hash缺点。
路由的基本原理：单页面应用中（多页面不涉及路由的问题），我们希望公用一部分页面（头部和底部），达到通过改变中间内容完成应用的所有展示和功能，其中一个需求就是在路由跳转时刷新页面可以保持当前状态。最早通过hash实现了这一需求，通过hashchange事件可监听hash的变化，实现不同页面的操作。后来HTML5提出了history，并提供了history.pushState()和history.replaceState()方法实现页面的不刷新跳转，不足的是，我没有方法监听history的变化，由此我们可以分析url的变化来实现响应的操作①浏览器前进、后退按钮②a标签的跳转③代码中location.href跳转，其中浏览器按钮可通过onpopstate事件监听，a标签可禁止其默认行为，由此，我们可以监听history的变化。
vue-router：路由跳转涉及功能钩子函数，beforeEach(to, from, next)--全局守卫函数，可在路由发生变化时做处理；组件中使用的钩子函数beforeRouterEnter(to, from, next)---组件尚未被创建，在此this无用；beforeRouterUpdate(to, from, next)--组件被复用时，，触发此函数，比如动态路由中的参数变化；beforeRouterLeave(to, from, next)--离开当前组件时调用。
5、过滤器的使用
filter.js:
const filters = {
filter1: (value) => {
doSomthing;
},
filter2: (value) => {
doSomthing;
},
}
export default filters;
import filters from "./filters/filter"
//通过object.keys引入vue中
Object.keys(filters).forEach(k=>Vue.filter(k,filters[k]))
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117552.html
摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果 单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...
摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果 单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...
平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析 深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...
平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析 深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...
阅读 2422·2021-10-09 09:59
阅读 2177·2021-09-23 11:30
阅读 2590·2019-08-30 15:56
阅读 1144·2019-08-30 14:00
阅读 2938·2019-08-29 12:37
阅读 1251·2019-08-28 18:16
阅读 1654·2019-08-27 10:56
阅读 1020·2019-08-26 17:23
