什么是响应式
我踢你一脚，你会喊疼，那你就是响应式的
若一个物体能对外界的刺激做出反应，它就是响应式的
响应式网页
如果我改变窗口的大小，网页内容会做出响应，那就是响应式网页
比如前端著名响应式网页
Vue 的 data是响应式
const vm=new Vue({data:{n:0}})
我如果修改vm.n,那么UI中的n就会响应我
Vue 2通过Object.defineProperty来实现数据响应式
vue.js的追踪变化，使用Object.defineProperty把这些属性全部转为getter/setter,而受到defineProperty的限制，vue不能检测到对象属性的添加删除，这个Bug是使用Vue.set或vm:$set来解决的。
理解vue响应式原理前我们必须先知道getter和setter以及Object.defineProperty几个概念
下面将简单用几个例子理解一个getter和setter以及Object.defineProperty
先简单理解getter和setter
getter和setter
定义的时候直接设置一个getter/setter
let obj0 = {
  姓: "吴",
  名: "亦凡",
  age: 28
};

// 需求一，得到姓名

let obj1 = {
  姓: "吴",
  名: "亦凡",
  姓名() {
    return this.姓 + this.名;
  },
  age: 28
};

console.log("需求一：" + obj1.姓名());
// 姓名后面的括号能删掉吗？不能，因为它是函数
// 怎么去掉括号？
 比如上面的例子，我要得到姓名，可以通过console.log("需求一：" + obj1.姓名());获得姓名，如果我要求直接obj1.姓名不加括号也可以获得姓名，怎么做？
getter
// 需求二，姓名不要括号也能得出值

let obj2 = {
  姓: "吴",      //原始值
  名: "亦凡",
  get 姓名() {
    return this.姓 + this.名;
  },
  age: 28
};

console.log("需求二：" + obj2.姓名);
总结：getter 就是这样用的。不加括号的函数，仅此而已。
setter
// 需求三：姓名可以被写

let obj3 = {
  姓: "吴",
  名: "亦凡",
  get 姓名() {
    return this.姓 + this.名;
  },
  set 姓名(xxx){        
    this.姓 = xxx[0]
    this.名 = xxx.slice(1)
  },
  age: 18
};

obj3.姓名 = '李嘉恒'        //setter用 xxx触发set函数

console.log(`需求三：姓 ${obj3.姓}，名 ${obj3.名}`)
  总结：setter 就是这样用的。用 = xxx 触发 set 函数
控制台出现的{n:(...)} 并不存在一个n,而是存在一个getter n和一个setter n来模拟对n的读写操作。
为什么要把n变为getter n和 setter n 呢？
我们再来理解Object.definePropery()
Object.defineProperty
定义完一个对象后（obj3）,你想在它身上添加新的get，set的时候通Object.defineProperty放xxx的值
var_xxx  = 0    //先声明再用 否则会陷入死循环
                //_xxx 用来偷偷存储 n 的值

Object.defineProperty(data3, 'xxx', {         //obj3是对象，xxx是要监听的
  get(){
    return _xxx
  },
  set(value){
    _xxx = value       //value为所传的值
  }
})
Object.defineProperty可以给对象添加属性value，可以给对象添加getter/setter, getter/setter用于对属性的读写进行监控。
代理和监听
代理（设计模式）
对myData对象的属性读写，会全权由另一个对象vm负责
那么vm就是myData的代理（类比房东和中介）
比如myData.n不用，偏要用vm.n来操作哦myData.n，这样用户不能直接的访问到原始数据，对数据是一个保护作用，比如你去通过房屋中介租房子，你并不能直接接触到房东。中介和房东之间就是一个全权代理的关系。
let data0 = {
  n: 0
}

// 需求一：用 Object.defineProperty 定义 n
let data1 = {}

Object.defineProperty(data1, 'n', {
  value: 0
})

console.log(`需求一：${data1.n}`)

// 需求二：n 不能小于 0
// 即 data2.n = -1 应该无效，但 data2.n = 1 有效

let data2 = {}

data2._n = 0 // _n 用来偷偷存储 n 的值

Object.defineProperty(data2, 'n', {
  get(){
    return this._n
  },
  set(value){
    if(value < 0) return
    this._n = value
  }
})

console.log(`需求二：${data2.n}`)
data2.n = -1
console.log(`需求二：${data2.n} 设置为 -1 失败`)
data2.n = 1
console.log(`需求二：${data2.n} 设置为 1 成功`)

// 抬杠：那如果对方直接使用 data2._n 可以篡改我的代码？如何做到不让别人访问我的_n?使用代理

// 需求三：使用代理

let data3 = proxy({ data:{n:0} }) // 括号里是匿名对象，无法访问

function proxy({data}/* 解构赋值，别TM老问 */){
  const obj = {}
  // 这里的 'n' 写死了，理论上应该遍历 data 的所有 key，这里做了简化
  Object.defineProperty(obj, 'n', { 
    get(){
      return data.n
    },
    set(value){
      if(value<0)return
      data.n = value
    }
  })
  return obj // obj 就是代理
}

// data3 就是 obj
console.log(`需求三：${data3.n}`)
data3.n = -1
console.log(`需求三：${data3.n}，设置为 -1 失败`)
data3.n = 1
console.log(`需求三：${data3.n}，设置为 1 成功`)

// 需求四

let myData = {n:0}
let data4 = proxy({ data:myData }) // 括号里是匿名对象，无法访问

// data3 就是 obj
console.log(`杠精：${data4.n}`)
myData.n = -1
console.log(`杠精：${data4.n}，设置为 -1 失败了吗！？`)

// 我现在改 myData，还能改
监听
就算用户擅自修改 myData，也要拦截他，使用监听
// 需求五：就算用户擅自修改 myData，也要拦截他

let myData5 = {n:0}
let data5 = proxy2({ data:myData5 }) // 括号里是匿名对象，无法访问

function proxy2({data}/* 解构赋值 */){
  // 这里的 'n' 写死了，理论上应该遍历 data 的所有 key，这里做了简化
  let value = data.n             //通过value记录原始的值
  Object.defineProperty(data, 'n', {
    get(){
      return value
    },
    set(newValue){
      if(newValue<0)return
      value = newValue
    }
  })
  // 就加了上面几句，这几句话会监听 data

  const obj = {}
  Object.defineProperty(obj, 'n', {
    get(){
      return data.n
    },
    set(value){
      if(value<0)return//这句话多余了
      data.n = value
    }
  })
  
  return obj // obj 就是代理
}

// data3 就是 obj
console.log(`需求五：${data5.n}`)
myData5.n = -1
console.log(`需求五：${data5.n}，设置为 -1 失败了`)
myData5.n = 1
console.log(`需求五：${data5.n}，设置为 1 成功了`)


// 这代码看着眼熟吗？
// let data5 = proxy2({ data:myData5 }) 
// let vm = new Vue({data: myData})

// 现在我们可以说说 new Vue 做了什么了
Vue对data做了什么？
vm=new Vue（{data:myData}）
1.会让vm成为myData的代理（proxy）
2.会让myData的所有属性进行监控
监控的目的是为了防止myData的属性发生了变化 vm却不知道（知道了才能刷新页面，达到响应式，就可以调用render(data)）,总之，就是你对data的任何修改我Vue必须都知道
Object.defineProperty的Bug问题
Object.defineProperty(obj,'n',{...})
必须要有一个'n', 才能监听&代理 obj.n，如果前端开发者比较水，没有给n怎么办？
Vue会给出一个警告,并且Vue只会检查第一层属性
只会检查第一层属性是什么意思呢？看下面例子
//一般没人这么写，我这样写是为了引用完整版 Vue
import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

new Vue({
  data: {
    obj: {
      a: 0 // obj.a 会被 Vue 监听 & 代理
    }
  },
  template: `
    <div>
      {{obj.b}}
      <button @click="setB">set b</button>
    </div>
  `,
  methods: {
    setB() {
      this.obj.b = 1; //请问，页面中会显示 1 吗？
    }
  }
}).$mount("#app");
请问上面例子中页面中会显示 1 吗？
答案是：不会
为什么：因为Vue没法监听一开始不存在的obj.b
解决办法
1.那我把key都声明好，后面就不用再加属性
2.使用Vue.set或者this.$set
Vue.set 和 this.$set
作用
新增key
自动创建代理和监听（如果没有创建过）
触法UI更新（但并不会立刻更新）
举例
this.$set(this.object,'m',100)
如果data中有数组怎么办
你没办法提前声明所有key
数组长度可以一直增加，下标就是key,你没有办法提前把数组胡key都声明出来 ，Vue
也不能检测新增的下标，难道每次改数组都要用Vue.set /this.$set?
对此尤雨溪纂改了数组的API,调用会更新UI
对象中新增的key
Vue没有办法事先监听和代理
要使用set来新增 key,创建监听和代理，更新UI.
最好提前把属性都写出来，不要新增key
但数组做不到 不新增key
数组中新增key
也可以用 set 来新增key,更新UI，不过7个API更方便对数组增删，这7个API会自动处理监听和代理，并更新UI,结论：数组新增key最好通过API.
总结
Object.defineProperty
可以给对象添加属性value
可以给对象添加getter/setter
getter/setter用于对属性的读写进行监控
啥是代理（设计模式）
对myData对象的属性读写，会全权由另一个对象vm负责
那么vm就是myData的代理（类比房东和中介）
比如myData.n不用，偏要用vm.n来操作myData.n
vm=new Vue({data:myData})
会让vm成为myData的代理（proxy）
会对myData的所有属性进行监控
为什么要监控？为了防止myData的属性变了，vm不知道
vm知道了又如何？知道属性变了就可以调用render(data)
UI=render(data)
如果data 有多个属性n,m,k那么就会有get n/ get m/ get k等
Vue的Date的Bug
1.如果有多个key,需要提前声明
2.Vue.set(){} / this.$set(){}可以添加data数据
响应式原理
vm=new Vue（{data:myData}）
把options.data传给vue之后，data会被Vue监听，这个data会被篡改，本来的n会变成getter n,setter n
会被Vue实例代理，比如说new Vue 得到一个vm，这个vm就是data的代理，每次我们对data的读写，都会被Vue监控，Vue只要发现对它进行了修改就会更新UI
Vue目前通过Object.defineProperty来实现数据响应式。

今天在做页面的时候突然想搞一个能在手机端也能完美显示的网页，这就意味着要做响应式，也就是要监听网页的宽度。

用Vue-cli搭建好项目后

在app.vue中写一个方法来监听屏幕宽度

setMobile(){
   addEventListener('resize',()=>{
      //写一个监听要执行的函数
   })
}

然后使用

document.documentElement.clientWidth || document.body.clientHeight;

来获取当前屏幕的宽度。

因为这个监听所有页面都能适用，所有引入了Vuex，关于Vuex的介绍不多赘述，他能在非父子，兄弟节点中传递数据。

简历store.js，导入Vuex，声明一个数据

state:{
        isMobile:false//确定是否为手机宽度
    },

最后可以在页面中使用this.$store.state.isMobile方法来获取是否为手机页面，使用方法例如：要在手机端隐藏某些组件

<nav
     class="nav-container"
        v-show="this.isShow&&this.$store.state.isMobile"
     >
    <my-nav/>
</nav>
//this.isShow是这个组件是否显示的一个数据
//this.$store.state.isMobile是获取的屏幕是否为手机页面的数据
//当他为true时这个组件就能显示
//当他为false时这个组件就能显示

完整代码

APP.vue

getScreen(){
   let clientWidth =document.documentElement.clientWidth || document.body.clientHeight;

   if(clientWidth < 768){//当屏幕小于768时，设置Vuex里的数据为true
      this.$store.commit("SET_MOBLIE",true)
   }else{//反之，设置Vuex里的数据为false
      this.$store.commit("SET_MOBLIE",false)
   }
},
setMobile(){
    //监听屏幕
    addEventListener('resize',()=>{
      this.getScreen();
    })
}

store.js

export default new Vuex.Store({
    state:{
        isMobile:false
    },
    mutations:{
        // 判断是不是手机端
        SET_MOBLIE(state,isMobile){
            state.isMobile = isMobile;
        }
    }
})

 

一、先上结果图：



当屏幕缩小时的界面：




二、首先我们先创建一些用到的组件，如图


二、顶部组件的相关操作(了解插槽)
1、NavBar.vue上代码：

里面ul>标签放置一个插槽，用来放置多个li>标签。为什么要放插槽呢？？因为在一些地方我们可能还会用到像这样模板，只是那时的li>标签内容不一样了。所以插槽就很好解决了，下次使用只需要改li>标签的内容即可
<template>
  <nav>
    <div class="logo">
      <slot name="logo-icon"><img src="../../assets/logo.jpg"></slot>
      <slot name="logo-title">巧克力电影</slot>
    </div>
    <div class="search">
      <el-input
        placeholder="请输入内容"
        size="medium"
        class="input_search">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <ul class="nav-menu">
      <slot></slot>
    </ul>
    <div class="burger" @click="handleBurger()">
      <div class="top-line"></div>
      <div class="middle-line"></div>
      <div class="bottom-line"></div>
    </div>
  </nav>
</template>

<script>
    export default {
        name: "NavBar",
        methods:{
            handleBurger(){
                const burger=document.querySelector(".burger");
                const navMenu=document.querySelector(".nav-menu");
                burger.addEventListener("click",function(){
                    burger.classList.toggle("active");
                    navMenu.classList.toggle("open");
                })
            }
        }
    }
</script>




2、NavBar.vue样式

响应式页面布局

@media screen and (max-width: 768px){

}

当网页屏幕小于max-width，样式发生的变化
<style scoped>
  nav{
    top:0;
    left:0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 5vw;
    height: 70px;
    background-color: rgba(65,81,101,0.9);
  }
  .logo{
    font-size: 28px;
    font-weight: 600;
    background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    flex: 1;

  }
  .logo img{
    width:30px;
    height:30px;
    border-radius: 5px;
    flex: 1;
    vertical-align: center;
  }
  .nav-menu{
    flex:1;
    display: flex;
    justify-content: space-around;
    max-width: 500px;
  }
  .burger{
    margin-left: 10px;
    display: none;
  }
  .burger div{
    width:30px;
    height:2px;
    background-color:#dadbdd;
    margin: 6px;
  }
  @media screen and (max-width: 768px){
    .nav-menu{
      position: absolute;
      top:70px;
      right:0;
      bottom:0;
      width:40vw;
      height:540px;
      background-color: rgba(65,81,101,0.7);
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;

      transform: translateX(100%);
      transition:0.3s ease-in-out;
    }
    .nav-menu.open{
      transform: translateX(0);
    }
    .burger{
      display: block;
    }

    .burger.active div{
      transition: 0.3s ease-in-out 0.2s;
    }
    .burger.active .top-line{
      transform: rotate(90deg) translateX(8px) translateY(-14px);
    }
    .burger.active .bottom-line{
      transform: rotate(90deg) translateX(-8px) translateY(-6px);
    }
    .burger.active .middle-line{
      transform: rotate(90deg) translateY(2px);
    }
    @keyframes slideIn {
      from{
        transform: translateX(20px);
        opacity: 0;
      }
      to{
        transform: translateX(0);
        opacity: 1;
      }
    }
  }
</style>

TabBarItem.vue页面代码，用来设置li>标签里面放置的内容

<slot name="li-icon"></slot>//给slot设置name,以便别的组件使用指定的插槽，，也可以设置默认值
<template>
  <!--子组件通过props获取父组件传来的值-->
    <div @click="itemClick">
      <li>
      <slot name="li-icon"></slot>//给slot设置name,以便别的组件使用指定的插槽，，也可以设置默认值
      <slot name="li-title"></slot>
      </li>
    </div>
</template>

<script>
    export default {
        name: "TabBarItem",
        data(){
          return{
          }
        },
        props:{
            path:String
        },
        methods:{
            itemClick(){
                console.log("toPath")
                console.log(this.path)
                this.$router.replace(this.path)
            },
        }
    }
</script>

<style scoped>
  li{
    list-style: none;
    color: #dadbdd;
    font-weight: 600;
  }
  li:hover{
    cursor: pointer;
  }
  @media screen and (max-width: 768px) {
    li{
      margin:3vh;
      transform: translateX(20px);
      transition: 1s slideIn ease-in;
    }
  }
</style>


3、MainTabBar.vue

给li>标签赋值

<span slot="li-title">首页</span>//通过 slot="li-title"将内容放置到指定位置， 这里我没有设置 slot="li-title"，根据需要自己设置

MainTabBar是父组件，它设置了path的值，子组件通过props获取父组件传给它的path值
<template>
  <!--父组件   path就是传给子组件的值-->
    <div>
        <nav-bar>
        <tab-bar-item path="/home">
          <span slot="li-title">首页</span>
        </tab-bar-item>
        <tab-bar-item path="/recommend">
          <span slot="li-title">热映中</span>
        </tab-bar-item>
        <tab-bar-item>
          <span slot="li-title">会员中心</span>
        </tab-bar-item>
        <tab-bar-item>
          <span slot="li-title">消息中心</span>
        </tab-bar-item>
        <tab-bar-item>
          <span slot="li-title">关于我们</span>
        </tab-bar-item>
        </nav-bar>
    </div>
</template>

<script>
  import TabBar from "./TabBar";
  import NavBar from "./NavBar";
  import TabBarItem from "./TabBarItem";

    export default {
        name: "MainTabBar",
        components:{TabBarItem,TabBar,NavBar},
        data(){
            return{

            }
        }
    }
</script>

<style scoped>

</style>


4、在App.vue设置公共组件MainTabBar

注意：导航栏/公共组件在部分页面显示，其他页面不显示，比如登录界面不需要公共组件

keepAlive为true显示公共组件，keepAlive在router index.js 设置


子组件和父组件传值的方式：
请看上一篇

1、用px2rem配合lib-flexible，让网页适配。
lib-flexible

作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备

安装：
npm install lib-flexible

引入：入口文件main.js中：
import "lib-flexible/flexible.js"

2、手写一个js小工具，省略rem的计算，加快开发速度。

在src目录下增加一个utils目录，在里面新建一个js文件，写入以下内容：
// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 750
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}


在main.js中引入改js文件：
import "./utils/rem"

然后就可以直接用px写页面啦，而不用去计算rem的值，是不是很舒服呢。
3、使用VW。了解下vw 与 vh单位，以viewport为基准，1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一
安装：
npm i postcss-px-to-viewport -save -dev

在package.json中配置如下：
"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 32,
        "propList": ["*"]
      }
    },
    "plugins": {
      "autoprefixer": {},
      "postcss-px-to-viewport": {
        "viewportWidth": 750,
        "minPixelValue": 1
      }
    }
  },

4、利用bootstrap实现响应式图片
在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

对于图片的大小限制一定要在图片的父级元素进行限制。
5、利用bootstrap的栅格系统，下面列一下栅格系统的参数：





超小屏手机 (<768px)
小屏幕平板(>=768px)
中等屏桌面(>=992px)
大屏桌面(>=1200px)




类前缀
.col-xs
.col-sm
.col-md
.col-lg


列数
12
12
12
12


.container最大宽度
None(自动)
750px
970px
1170px


举个移动设备和桌面的例子：


<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

还有更多对响应式的支持，就不一一列举了。