前端成长之路

关于web端数组拖拽排序功能，有h5自带的draggable属性，以及基于此的sortablejs插件，以及在此基础上基于Vue框架的vue.draggable。现在先讨论一下vue.draggable，后面有时间再详细研究。 参考链接：https://www.itxst.com/vue-draggable/tutorial.html 一.安装 使用yarn add vuedraggable 或者npm i -S vuedraggable 二.使用 <template> .

最近在开发过程中有一些对网页使用体验的需求。比如列表页有三个可以切换的tab：A,B,C，每个tab对应不同列表以及相应的增删改查，此时会发现，在tab-B或tab-C中进入新增或编辑页面，点击返回，回到的页面是tab-A,而不是之前浏览的页面，这很影响使用体验。此时就可以使用到keep-alive来对组件进行缓存。从官方文档来理解，就是用于保留组件状态或避免重新渲染。使用方式：1.可以使用基础的使用方式，在router.js文件中给要缓存的路由组建添加meta: {keep-alive: true}

计算属性通过getter和setter方法来改变数据计算属性和普通方法的区别在于，计算属性会缓存，即数据不改变的话不会重新计算，对比普通方法，有利于性能提升watch也具备缓存机制，但是和computed相比语法要复杂get方法返回计算的值，set方法传入新的值，然后改变它相关联的值，相关的值发生变化触发重新计算，get新的值，页面也会相应的变化...

一、生命周期生命周期函数是Vue实例在某个时间点自动执行的函数创建一个Vue实例的步骤：1.初始化事件和生命周期结束后，执行beforeCreate2.初始化外部注入和双向绑定等内容，完成后执行created3.判断实例中是否有el挂载点，有的话会判断是否有模板template，如果有则用模板去渲染，如果没有则会把el挂载的html整体当做模板，此时来到beforeMount，即模板和数据结合前的节点4.然后模板和数据结合形成的Vue实例中的Dom元素(el)会被挂载到页面上，即用el)会被挂载