ref在组件和普通元素的区别

如果ref绑定在组件上，那么this.$refs.refname获取到的是组件对象如果ref绑定在普通元素上，那么this.$refs.refname获取到的是html元素对象

项目中获取指定的元素？

不用ducument.querySelecter('.className')，因为页面中可能有多个同名class,唯一识别一个普通元素，仍然可以加<div class="wrapper" ref="scroll"> 通过this.$refs.scroll获取这个div

原生事件在组件上的使用？

组件内部：

组件引用：

结论：

组件引用时候，通过.native修饰符<component-name @click.native="">为组件根元素添加事件

生命周期

涉及到元素挂载的，一般在mounted做

事件总线

增加$bus, Vue.prototype.$bus = new Vue()
发布事件，this.$bus.$emit('action')
订阅事件this.$bus.$on('action', () => {})
取消监听this.$bus.off('action', function)

可以把function抽出来，变量保存。完整示例

better-scroll移动端滑动组件的wrapper&content问题

框架规定，父wrapper包裹content，wrapper挂载BScroll,content内容超过wrapper,wrapper设置超出后隐藏css属性，即可初步实现。

问题：

商城例子中，content区域的图片由接口请求而来，明明图片非常多，content高度也很大，但是不触发滚动。

分析：

当content的内容是服务器加载而来，且接口数据为图片类型时，会出现图片异步下载，而BScroll实例关于监听的滚动区域content的高度scrollHeight仅在初始化的时候获取一次，这时候图片并没有加载出来，因此content区域中计算到的scrollHeight小于wrapper高度，不会触发滚动。

解决思路：

图片每次加载完，让BScroll实例重新计算获取一次高度，api为this.scroll.refresh()

解决方案：

页面结构为： home.index 中引用了scroll.vue和GoodsList.vue,GoodsList.vue中引用了GoodsListItem.vue，GoodsListItem.vue中则是图片真正渲染的地方，需要GoodsListItem.vue中图片加载完，通知home.index调用scroll的refresh.

由于组件之间没有直接关系（叔侄关系），此时我们用到了事件总线代替父子间层层传递。事件总线参考本章事件总线的三步骤。使得GoodsListItem.vue注册图片加载完成的事件，home.vue中监听该事件，并调用scroll的refresh.

防抖函数

背景：

场景一： 当输入框中需要根据搜索关键字调用后端接口的时候。如果每输入一个字母都调用接口，就会触发多次，造成页面性能差，服务器压力大。

场景二： 上述better-scroll移动端滑动组件的wrapper&content问题中，GoodsListItem.vue中每张图片加载完，都调用一次refresh也是性能的巨大浪费。

目标：

在一个时间周期或者操作周期内，只调用一次接口。如场景一中，输入框3000ms没有变化调一次接口，如场景二，每一次page请求内的图片数据全部加载完成，调用一次refersh。

解决方案：

对refresh非常频繁的问题，进行防抖操作。

debounce防抖
throttle节流

改造前

接口返回list，在图片位置，每次加载完每张图片，事件总线注册事件，首页监听事件，调用scroll的refresh,此时refresh调用了30次

改造后

使用debouce在首页对事件总线监听到图片加载完成的事件中，调用防抖函数，使得指定时间内重新refresh一次content高度，此时refresh调用了一次

debounce实现

debounce (func, delay) {
      // func:做什么 delay:等多久
      let timer = null
      return function () {
        if (timer) {
          timer = clearTimeout(timer)
        }
        timer = setTimeout((...args) => {
          func.apply(this, args)
        }, delay)
      }
    }

const refresh = this.debounce(this.$refs.scrollWrapper.refresh, 1000)
this.$bus.$on('itemImgLoad', () => {
  refresh()
})

mixin

背景：

一些组件公用的方法，属性，生命周期公用的钩子方法，可以通过mixin 混入到组件中，避免代码大量重复，如商城中图片加载监听，在首页和详情都会用到，因此相关方法混入方式使用

基本使用：

定义变量：mixin是一个变量对象，对象中的属性就是new Vue(option ={})的参数options
组件中引用mixin变量
使用mixin:通过this. 使用其内部的options

mapGetters

什么情况下用？

使用vuex，组件内获取其getters属性的时候使用。

怎么用？

组件内在computed中通过...mapGetters的方式获取store中的getters,具体有两种语法：数组和对象

假设已定义好vuex相关且注册

组件内在computed中通过...mapGetters的方式获取store中的getters,具体有两种语法：数组和对象

mapActions使用

什么情况下使用？

使用vuex，组件内向调用actions中定义的方法，但是不想通过dispatch调用时，通过mapActions做映射

怎么用？

引用import { mapActions } from 'vuex'
methods内映射...mapActions({addCart: 'addToCart'})
调用：dispatch替换

备注：actions中可以返回promise,让页面获取一些必要的值，如下方，需要在添加购物车后，提示添加成功的message

this.$toast.show(res)封装

思路：

this.$toast说明$toast挂载在Vue原型对象上
this.$toast是封装好的Toast组件，.show是调用Toast组件的show方法
只要是this.$***，那么就需要 *** 以插件的形式引用，插件注册方式：main中Vue.use( *** ),调用的正是XXX的install方法，该方法中实现Vue.prototype.$toast = Toast,Toast正是组件

代码实现：

main中：

插件中：

图片懒加载

可以干嘛？可以让滑动到视图区域的图片加载出来，而未滑动到的视口不展示图片或者展示默认的图片。借鉴网上解释：

使用？

安装插件npm install vue-lazyload --save
注册插件Vue.use(VueLazyLoad, {options})
img标签使用，将:src='src'替换为 v-lazy='src'

options可选参数：

demo

移动端适配px转vw

linux nginx本地下载

安装brew/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

查看是否安装成功brew -v

查询安装的软件是否存在brew search nginx // 查询要安装的软件是否存在

4.查看安装的软件信息 brew info nginx

1）nginx在本地还未安装（Not installed），nginx的来源（From）

2）Docroot默认为/usr/local/var/www

3）在/usr/local/etc/nginx/nginx.conf配置文件中默认端口被配置为8080，从而使nginx运行时不需要加sudo

4）nginx将在/usr/local/etc/nginx/servers/目录中加载所有文件

5）以及我们可以通过最简单的命令 ‘nginx‘ 来启动nginx

5.安装brew install nginx

6.open /usr/local/Cellar/nginx 执行命令，查看本机安装的nginx文件目录，关注bin 和 html文件夹， bin中是nginx启动的exe, html是启动后指定的端口以及端口展示的文件，后者可以修改，修改方式参考步骤7。

7.若要修改nginx启动的相关配置，通过open /usr/local/Cellar/nginx进入配置目录，修改其中的nginx.conf,以下图为例，我们需要将本地的商城项目npm run build生成的dist文件放入服务器，并指定nginx启动的默认页面为dist/index.html

8.修改配置后，启动nginx服务器，只需要控制台执行nginx即可，如果没有任何提示，那么就是启动成功。我们在浏览器上输入 localhost:8080就可以看到我们部署的项目了

nginx详细参考blog.csdn.net/speedwalkma…

远程部署

需要租借云服务器，安装linux centreOS 操作系统，安装nginx,ssh登录主机服务器，修改conf,粘贴dist，启动，访问（公网地址访问）

项目中注意事项