你不得不看的干货，不看损失一个亿（上）-阿里云开发者社区

你不得不看的干货，不看损失一个亿（上）

2022-05-12 139

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 你不得不看的干货，不看损失一个亿

1. webpack魔法糖和异步组件的体现

<template>
    <div>
        <div @click="showHander">显示组件</div>
        <testcom v-if="show"></testcom>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                show:false,
            }
        },
        methods:{
            showHander(){
                this.show=!this.show;
            },
        },
        components:{
            //使用了魔法
           testcom:()=>import(/* webpackChunkName:"lhtest" */'../components/test-com')
        }
    }
</script>

webpack魔法糖发生的魔法现象

在页面第一次渲染的时候

并不会直接去加载testcom这个组件

而是页面需要渲染的时候

才会去加载这个组件

/* webpackChunkName:"lhtest" */ 这个是webpack的魔法注释

2.打包后项目可视化分析

https://blog.csdn.net/qq_39523111/article/details/108790661
vue/cli2.0 脚手架
npm run build --report
vue-cli3脚手架 项目npm run build --report生成分析图
npm run build -- --report

小可爱们看下图，发现了什么没有

3 获取data初始状态下的值 this.$options.data().xx·和data下的所有值this.$data

<template>
    <div>
        <el-button @click="gotos">改变</el-button>
        <el-button @click="change">获取data中的所有值</el-button>
        <el-button @click="inithander">获取初始状态下data中所有值</el-button>
        <el-button @click="reset">将data的值重置</el-button>
        <div>{{ obj}}</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            obj:{
                name:'张三',
                age:'20',
                sex:'男'
            },
            subjective:{
                info:'ok'
            }
        }
    },
    methods:{
        gotos(){
            this.obj.sex='我改变了性别'
            this.obj.age='我改变了年龄20-->30'
            this.obj.name='张三变成wang'
        },
        //获取vue中data中的所有值 当然data中的值也有可能是被改变了的
        change(){
            console.log('vue中data中的所有值',this.$data);
        },
        // 获取组件下初始状态下的值；就是你在data中最初写的值
        inithander(){
            console.log('初始状态下的值',this.$options.data());
        },
        // 重置值
        reset(){
            // 第一种
            // Object.assign(this.$data.obj,{name:'',age:'', sex:''});
            // 第二种
            Object.assign(this.$data.obj,this.$options.data().obj); //前提是obj的值是空
            console.log('重置', this.obj )
        }
    }
}
</script>

4.我们的主角---> onbeforeunload 事件

举个小栗子，如下面的场景

往下看，接近我们的主角

<template>
    <div>
        <h3>我是内容，不要看我</h3>
    </div>
</template>
<script>
 document.body.onbeforeunload = function () {
    setTimeout(() => {
        alert("离开页面将导致数据丢失！");
    })
}
</script>

5 .uni-app中html中的你认为的this；实际的this

看完之后，惊喜不，意外不；是不是跟你想象中的this不一样；

那么this到底指向哪里呢？？？？

<template>
  <view class="page-demo">
    <view class="demo" >
      我想出来看看
      {{ this}}
    </view>
  </view>
</template>
<script>

它的庐山真面目

6.阻止键盘弹起推动页面

康康我们的代码

<view class="bottom-wri-box" :style="{bottom: bottomHeight}">
  <image @tap="changeChander" class="left-cont-icon" :src="imageUrl+'/huifu-icon.png'"></image>
  <input  
  :adjust-position="flasFlag"
  @confirm="AddSendMess"
  class="mormal-input uni-input"
  maxlength="300"
  @focus="getheightCont"
  @blur="initheight"
  confirm-type="send"
  placeholder="说点什么" 
  v-model="writeCont" />
</view>

data中的值，用于控制input输入框的位置；

flasFlag:false, //表示input输入时，页面不会往上推动
bottomHeight:'0rpx',//input框的位置

mthods中的方法动态控制input框中的位置

methods:{
  getheightCont(e){
    //e.detail.height 用户获取键盘的高度，由于机型的不同，所以可以加上一个值10或者20
    this.bottomHeight=(e.detail.height*2)+10+"rpx";//你可以加上20或者加上10
  },
  //失去焦点后恢复原来的位置
  initheight(){ 
     this.bottomHeight='0rpx'
  },
}

css

.bottom-wri-box{
   width:100%;
   background-color:#fff;
   position:fixed !important; //一定要固定定位哈
   height: 152rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000 !important;
   box-shadow: 0px -2px 20px 0px rgba(0,0,0,0.05); 
   .mormal-input{
      width: 604rpx;
      height: 80rpx;
      background: #f5f5f5;
      border-radius: 44rpx;
      padding-left: 34rpx;
      box-sizing: border-box;
      padding-right: 32rpx;
       //注意input框中内容太多可能会出现样式移溢出
      white-space:normal !important; 
      word-break:break-all !important; 
      margin-left:28rpx;
}
  // 左侧图标 右侧表情
  .left-cont-icon{
       width: 54rpx;
       height: 54rpx;
   }
}

我们在输入的时候，发现页面并没有往上推动；

7.uni-app同一个元素添加多个类

我想象中的

<template>
  <view class="page-demo">
        <view   v-for="(item,index) in listArr" :class="addclassName(item)"> 
      {{item.cont }}
    </view>
    </view>
</template>
<script>
export default {
data(){
  return{
     listArr:[
      {cont:"司藤",type:1001},
      {cont:"山河令",type:1002}, 
      {cont:"清风徐来",type:1003},
      {cont:"九州",type:1004}
      ]
   }
 },
 filters: {
  addclassName(i) {
      switch (mess.type) {
      case 1001:
      return 'oncss';
      case 1002:
      return 'offcss'
      }
   }
   },
}
</script>