vue对象响应式,大屏自适应两种方案

1.浏览器从输入地址到打开网页的过程发生了什么

2.vue中对象响应式

对于对象直接通过赋值的方式无法是对象属性具有响应式: 1.通过$set()方法对对象的属性进行增删改的操作具有响应式

2.通过接口获取数据再进行赋值,此时接口中的属性都是具有响应式的

3.通过this.obj = Object.assign({},this.obj,{赋值的对象})方法,可以将源对象重新触发一遍Object.defineProperty依赖收集,也具有响应式.

const app = new Vue({
    el: "#app",
    data: () => {
        msg: {
            name: 'jingwei'
        }
    },
    methods: {
        addProperty() {
            this.msg.age = 18;  //（非响应式）
            // 原则上这是一个赋值行为，所以vue会重新收集新对象的依赖
            this.msg = Object.assign({}, this.msg, { age: 18 }); //（响应式）
        }
    }
})

3.大屏自适应的两种方案

以下面的布局为例来说明。

<div className="screen-wrapper">
    <div className="screen" id="screen">
        <div class="section">A</div>
        <div class="section">B</div>
        <div class="section">C</div>
        <div class="section">D</div>
        <div class="section">E</div>
    </div>
</div>

1. 基于transform的自适应方法

function setScale(){
    let designWidth = 1366;//设计稿的宽度，根据实际项目调整
    let designHeight = 768;//设计稿的高度，根据实际项目调整
    let scale = document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ? 
         (document.documentElement.clientWidth / designWidth):
         (document.documentElement.clientHeight / designHeight);
    document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%)`;
}
window.onresize = function () {
    setScale()
};

然后设置样式，元素大小完全按照设计稿大小设置。代码如下所示

$design_width: 1366px;//设计稿的宽度，根据实际项目调整
$design_height: 768px;//设计稿的高度，根据实际项目调整
.screen-wrapper {
   height: 100vh;
   width: 100vw;
   background-color: aqua;
   .screen{
      display: inline-block;
      width: $design_width;
      height: $design_height;
      background: yellow;
      transform-origin: 0 0;
      position: absolute;
      left: 50%;
      .section{
         height: 200px;
         width: 200px;
         outline: 1px solid #ddd;
         line-height: 200px;
         font-size: 40px;
         text-align: center;
         display: inline-block;
      }
   }
}

2. 基于rem的自适应方法

setFontSize()
function setFontSize(){
    let designWidth = 1366;//设计稿的宽度，根据实际项目调整
    let designHeight = 768;//设计稿的高度，根据实际项目调整
    var fontSize = 
        document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ? 
        (document.documentElement.clientWidth / designWidth) * 12:
        (document.documentElement.clientHeight / designHeight) * 12;
    document.querySelector('html').style.fontSize = fontSize + 'px';
}
window.onresize = function () {
    setFontSize()
};

设置样式，需将元素单位px转换成rem。

$design_width: 1366;//设计稿的宽度，根据实际项目调整
$design_height: 768;//设计稿的高度，根据实际项目调整

@function px2rem($px) {
   $design_font_size: 12;
   @return ($px/$design_font_size) + rem;
}
.screen-wrapper {
   height: 100vh;
   width: 100vw;
   background-color: aqua; 
      display: flex;
      flex-direction: row;
      justify-content: center;
   .screen{
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: px2rem($design_width);
      height: px2rem($design_height);
      background: pink;
      .section{
         height: px2rem(200);
         width: px2rem(200);
         border: 1px solid #000;
         line-height: px2rem(200);
         font-size: px2rem(100);
         margin: px2rem(20);
         text-align: center;
         display: inline-block;
      }
   }
}