vue补充

https://www.cnblogs.com/doumian/p/12585904.html

该项目是一个购物商城的移动 app，采用 VUE 框架构建单页面应用，实现购物商店的基本操作，如浏览商品种类及商品的
详细信息等功能。
 使用 vue 框架，vue-router 搭建项目路由，vuex 实现各组件数据的共享。
 根据业务逻辑，划分组件，结合 vue 第三方插件(Swiper插件)，ES6 语法、HTML5、CSS3 完成页面设计及布局实现。
 采用组件化思想搭建项目，增加代码的复用性，从而提高开发效率，合理使用钩子函数，实现数据的监听。
 通过 better-scroll、vue-lazyload 插件、路由懒加载等实现页面性能的优化

1.js实现轮播图

1、html、css实现基本布局
2、自动轮播函数：定时器的设置、（节点dom的偏移）
    index：当前第几张图片，从0开始
3、当前图片的位置标记li：利用domChange函数控制位置标记的显示状态（当前图片的className 属性为active，节点dom要偏移）
4、添加前后按钮，添加点击事件（index--// 往左走，做--）
5、轮播函数、点击事件中调用domchange函数（标记随之改变）
6、鼠标进入暂停、离开重开计时器

https://www.cnblogs.com/learnRoad/p/11270960.html 

2、vue中Swiper插件

前端进击之路——Vue项目使用vue-awesome-swiper轮播插件（搜索）

安装、引用、使用

<template>
    <div class="wrapper">
        <swiper :options="swiperOption" >
            <swiper-slide v-for='item of swiperList' :key="item.id">
                <img :src="item.imgUrl" class="swiper-img">
            </swiper-slide>
            //分页器：就是下面的小圆点
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data: function () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      },
      swiperList:[{
      id:"0001",
      imgUrl:"http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg"
      },{
      id:"0002",
      imgUrl:"http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg"
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
    background:#fff
.wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 30.48%
    background: #ccc
    .swiper-img
        width: 100%
</style>

另外：http://dongjunhui.com/archives/66/

3、vue中虚拟DOM的渲染

https://blog.csdn.net/weixin_42357865/article/details/102999633

将VDOM渲染为真实的DOM——creatElement
渲染流程
1.通过数据拦截【es5】的Object.defineProperty中的getter和setter实现对数据进行的设置
2.通过VDOM模拟真实的dom结构
3.通过特定的render算法将VDOM解析
4.渲染真实DOM
5.当数据改变时又会再次生成VDOM
6.通过diff算法同级比较新旧VDOM，生成patch补丁对象
7.重新渲染正式dom，之渲染变化的部分
为什么要用VDOM模拟dom结构？
频繁的dom操作是性能优化的瓶颈，VDOM加载速度快
操作数据要比操作真实DOM快得多

利用snabbdom实现虚拟DOM
核心方法：h()、patch()
h()：用于生成虚拟节点树。
使用方式：const vnode = h('标签名+id/class', {定义事件}, [存放子节点]或者内容)
patch(curNode, newNode)：传入新旧节点，对比后自动实现替换、修改、移动节点等操作

Vue中的模板解析和渲染的核心就是：
通过类似snabbdom的h()和patch()的函数，现将模板解析成vnode，
如果是初次渲染，则通过patch(container,vnode)将vnode渲染至页面，
如果是二次渲染，则通过patch(vnode,newNode)，先通过Diff算法比较原vnode和newNode的差异，以最小的代价重新渲染页面。

4、vue-lazyload 图片懒加载

安装插件、main.js中引用插件、:src 属性直接改为v-lazy

效果是默认不加载图片，先用一个占位符图来代替，等使用图片的时再进行加载（比如滚动到图片的时候），
如果真正的图片请求出错了，用默认的出错图片来进行占位

懒加载原理

图片的加载是由src的值引起，当对src赋值时浏览器就会请求图片资源，基于这个，可以利用html5属性data-XXX来保存图片的路径，当我们需要加载图片的时候才将data-xxx的值赋予src，这样就能实现图片的按需加载，也就是懒加载了

懒加载优点

提高前端性能，图片在需要的时候才加载，减轻服务的负担，提高页面的加载速度，能够减少带宽。

5、路由懒加载

不使用路由懒加载时app.js在首页加载时会把全部的路由js代码加载完毕，一定程度上影响页面加载速度

在使用某个component的时候才会加载这个相应的组件，这样写大大减少了初始页面 js 的大小。

之前
import Manage from "index.vue";

现在：
const Home = () => import('../views/home/Home.vue')
const routes =[
    {
        path: '/home',
        component: Home
    }]

6、better-scroll插件：解决在移动端滚动卡顿问题

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  export default {
    mounted() {
        mounted() {
/*Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了 this.$refs.wrapper 访问到了这个 DOM 对象，
并且我们在 mounted 这个钩子函数里中初始化 better-scroll 。
因为这个时候，wrapper 的 DOM 已经渲染了，我们可以正确计算它以及它内层 content 的高度，以确保滚动正常。*/
        this.scroll = new BScroll(this.$refs.wrapper, {
            click: true,
            probeType: this.probeType,
            pullUpLoad: this.pullUpLoad
        })
      // 监听位置
      // 上拉加载更多
        }
    },
    }
  }
</script>

父容器wrapper，它会有固定的高度。父容器的第一个子元素content，它的高度会随着内容的大小而撑高。
那么，当 content 的高度不超过父容器的高度，是不能滚动的，
而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。

当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

实时监听滚动位置position：决定tabControl是否吸顶（吸顶功能是否出现）
上拉加载更多：不是一次性加载数据，（一次性加载数据，可能造成页面空白，因为数据很大，加载时间更多），而是按需加载。（这是优化网页）

优点：
滚动位置固定：在vue中通过路由切换页面时组件会自动滚动到顶部，需要监听滚动行为才能让滚动位置固定，
better-scroll解决了这个问题。

7、防抖函数

https://www.jianshu.com/p/c8b86b09daf0 

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

let context = this;
let args = arguments;
防抖函数的代码使用这两行代码来获取 this 和 参数，是为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数。

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

8、组件复用：

 Home 顶部导航栏组件（左中右）、better-scroll 滚动组件（引入better-scroll 解决在移动端滚动卡顿问题）

底部导航栏封装（首页、分类、购物车、我的）、轮播图组件导入、自定义提示框组件（Toast）

 

为了减少对better-sroll的依赖，对better-scroll 进行封装 而且在多数页面需要用到，在公共组件进行创建创建,将引用插件进行封装成一个组件，那里需要进行导入这个组件即可，后期维护也方便，逻辑也清晰

双向绑定原理

https://www.cnblogs.com/sweeeper/p/10829887.html