一些点的研究5

最新推荐文章于 2022-12-06 15:13:53 发布

烟雨浥轻尘

最新推荐文章于 2022-12-06 15:13:53 发布

阅读量348

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_41430522/article/details/119330976

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.今天遇到一个问题，有个页面用import引入了一个对象文件

然后我切换了路由，再回来，发现这个页面的对象文件的改变并没有重置

也就是说，你开始的操作改变了引入的那个文件的写死的值，不会随着你页面刷新而刷新

意思是import是引用，而不是拷贝，一直操作的是同一份数据，而且还不会随着路由跳转重置，除非你ctrl f5或者地址栏回车刷新页面，不然那份文件不会被初始化，require是拷贝一份

mixin混入也是拷贝一份，不受影响

vuex是引用，全局状态嘛

所以其实有时候你也可以不用vuex，直接用一个js文件，里面写对象来管理也行

其他地方引入，来改

具体验证如下

router。js

const router = new Router({
  mode: 'history',
  // mode: 'hash',
  routes: [
    {
      path: '/hh/:id',
      name: 'HelloWorld',
      component: HelloWorld,
      props: true
    },
    {
      path: '/ww',
      name: 'HelloWorld1',
      component: HelloWorld1
    },
    {
      path: '/map',
      name: 'EchartsAll',
      component: EchartsAll
    }
  ]
})

helloword

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    {{ $route.params.id }}
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank"> Core Docs </a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank"> Forum </a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank"> Community Chat </a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank"> Twitter </a>
      </li>
      <br />
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a href="http://router.vuejs.org/" target="_blank"> vue-router </a>
      </li>
      <li>
        <a href="http://vuex.vuejs.org/" target="_blank"> vuex </a>
      </li>
      <li>
        <a href="http://vue-loader.vuejs.org/" target="_blank"> vue-loader </a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank">
          awesome-vue
        </a>
      </li>
      <div v-if="flag">asjdflkjsdkfsdl</div>
      <div v-else>
        16115165164189
        {{ obj.name.fuck }}
        {{ obj.age }}
      </div>
      <h1>这个是test的state {{ number }} 这里是Hellowrold</h1>
    </ul>

    <div @click="handleClick">
      ---------------------show{{fff.name}}
    </div>
  </div>
</template>

<script>
import SOCKETJS from 'sockjs-client'
import { createNamespacedHelpers } from 'vuex'
import {myFuck} from '@/mock.js'
const { mapState } = createNamespacedHelpers('test')
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      obj: {

      },
      flag: true,
      fff: ''
    }
  },
  computed: {
    ...mapState(['number'])
  },
  created() {
    console.log('this', this)
    this.fff = myFuck
    setTimeout(() => {
      // this.flag = false
    }, 2000)
    let a = new SOCKETJS('http://www.kirrito.top/wx/1561')
    console.log(a, SOCKETJS)
  },
  methods: {
    handleClick() {
      this.fff.name = 'fuck alll ad'
      this.$router.push({
        name: 'HelloWorld1'
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

hellowrod1

<template>
  <div class="hello">
    <h2>Essential Links</h2>
    dfarsfasdfadfasdfasfdasdfasdfaawfasdfasdf
    <div>asfd asdfs</div>
    <h1>
      <div @click="changeNumber(300)">
        点一下把test的state 改变成300 现在是在Helloworld1中,
        看看Hellowrold中有没有同步改变
      </div>
      这个是test的state {{ number }}
      <div >
     <div @click="handleClick">
        ---------------------show222222222222222{{fff.name}}
     </div>
    </div>
    </h1>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import {myFuck} from '@/mock.js'
const { mapState, mapMutations } = createNamespacedHelpers('test')
export default {
  name: 'HelloWorld',
  props: ['id'],
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      fff: ''
    }
  },
  computed: {
    ...mapState(['number'])
  },
  created() {
    console.log(0)
    this.fff = myFuck
  },
  methods: {
    ...mapMutations(['changeNumber']),
    handleClick() {
      this.fff.name = 'fuck alll ad'
      this.$router.push({
        name: 'HelloWorld'
      })
    }
  },
  mounted() {
    console.log(-1)
  },
  beforeRouteEnter(to, from, next) {
    // ...
    console.log(1)
    next(vm => {
      console.log(vm.msg)
    })
  },
  beforeRouteLeave(to, from, next) {
    // ...
    console.log(6)
    if (confirm('确认离开吗?') === true) {
      next()
    } else {
      next(false)
    }
  },
  beforeDestroy() {
    console.log(2)
  },
  destroyed() {
    console.log(3)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

mock.js

export const myFuck = {
  name: 'fuckallladyies'
}

效果是，点击跳转路由前改这引入的值，跳转后另一个页面也引入了这个值，可以发现是刚刚上一个页面改的那个值，说明改动了同一个分，说明只是引用

2.vue中key真的特别重要。。

今天遇到一个bug

一个页面用了两个一样的组件

但是他们传的是两份不同的数据

但是页面渲染切换的时候，他们会有一些bug

开始我以为是数据的问题

后来发现没加key，加了就正常了

3.匹配空的正则是 /^$/

4.+号可以转换类型，比如+05=》5

5.element的form里的自定义校验规则validator

有个问题，就是不好复用，同样的校验规则不好用同一个函数，再传参辨别来做

因为不好传参，我的意思是

const ruleFunctionName = (rule, value, callback) => {
  console.log(word)
  const reg = /^[a-zA-Z\u4e00-\u9fa5-_\.\d]{1,100}$/g;
  if (value !== "") {
    if (!reg.test(value)) {
      callback(
        new Error("输入中英文、中划线、下划线、英文句号、数字，不超过100个字符")
      );
    } else {
      callback();
    }
  } else {
    callback(new Error("模板名称不能为空"));
  }
};
const ruleFunctionName2 = (rule, value, callback) => {
  console.log(word)
  const reg = /^[a-zA-Z\u4e00-\u9fa5-_\.\d]{1,100}$/g;
  if (value !== "") {
    if (!reg.test(value)) {
      callback(
        new Error("输入中英文、中划线、下划线、英文句号、数字，不超过100个字符")
      );
    } else {
      callback();
    }
  } else {
    callback(new Error("分组名称不能为空"));
  }
};



addTempFormRules: object = {
    templateName: [
      {
        required: true,
        validator:ruleFunctionName,
        trigger: "change"
      }
    ],
    directoryPath: [
     {
        required: true,
        validator:ruleFunctionName,
        trigger: "change"
      }
    ]
  };

如图中代码，他们校验规则一模一样，但是只是提示文字不同，一个是名称一个是分组

看到这个，脑中第一个想法就是，写一个函数，传参判断，复用

但是怎么传参是个问题，研究了下，找出了这个方法

const ruleFunctionName = (rule, value, callback,type) => {
let word = ''
switch (type){
    case 'templateName':
        word = '模板名称'
    break;
    case 'templateName':
        word = '分组'
    break;
    default:
    break;
}
  const reg = /^[a-zA-Z\u4e00-\u9fa5-_\.\d]{1,100}$/g;
  if (value !== "") {
    if (!reg.test(value)) {
      callback(
        new Error("输入中英文、中划线、下划线、英文句号、数字，不超过100个字符")
      );
    } else {
      callback();
    }
  } else {
    callback(new Error(`${word}不能为空`));
  }
};

 addTempFormRules: object = {
    templateName: [
      {
        required: true,
        validator: (rule, value, callback) => {
          ruleFunctionName(rule, value, callback, "templateName");
        },
        trigger: "change"
      }
    ],
    directoryPath: [
     {
        required: true,
        validator: (rule, value, callback) => {
          ruleFunctionName(rule, value, callback, "directoryPath");
        },
        trigger: "change"
      }
    ]
  };

，好像还有一方法是bind

https://blog.csdn.net/qq_42941302/article/details/112799014

不过没看太懂，噢看了下看懂了

就是bind改变this指向，指向一个新对象，这个对象里有你需要的参数

不得不说这个思路是真不错，这篇文章讲的很棒

我把精华部分截图出来

6.关于vue二次封装element的组件，传参问题

首先$attrs的作用是，你没用prop接受的属性都会出现在$attrs上

然后这里说下需求

就是我要吧写在组件上的方法和属性都传递到内部的element组件身上，当然了传的都是他需要的

而我组件自己需要的属性和方法，我就自己接收

接下来看两个试例

https://www.cnblogs.com/llcdxh/p/10330726.html

 因为base-input的外层是一个label元素，所以默认情况下使用v-on:focus是无效的，所以需要配合$listeners使用，该属性可以把事件的监听指向组件中某个特定的元素

https://blog.csdn.net/suprezheng/article/details/84933445

v-bind="textObj"

textObj:{ type:"text", name:"username", value:"一次绑定" }

v-bind绑定对象，可以一次绑定多个属性

于是实例如下

mtintput组件

<template>
  <div
    class="mone-test-resource-mtInput"
    @mouseenter.stop="enterInput"
    @mouseleave.stop="leaveInput"
  >
    <el-tooltip
      ref="popover"
      v-bind="tooltipConfig"
      :manual="true"
      :value="isShow"
      :content="customizedAttrs.inputValue"
    >
      <template slot="content">
        <slot name="content" />
      </template>
      <!-- 不写template会报错 -->
      <template>
        <el-input ref="inputRef" v-bind="inputConfig" v-on="$listeners">
          <!-- prefix -->
          <template slot="prefix">
            <slot name="prefix" />
          </template>
          <!-- suffix -->
          <template slot="suffix">
            <slot name="suffix" />
          </template>
          <!-- prepend -->
          <template slot="prepend">
            <slot name="prepend" />
          </template>
          <!-- append -->
          <template slot="append">
            <slot name="append" />
          </template>
        </el-input>
      </template>
    </el-tooltip>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import _ from "lodash";

@Component({
  name: "MtInput",
  inheritAttrs: false,
  components: {},
})
export default class MtInput extends Vue {
  /*** props ***/
  /*** data ***/
  isContentOverflow: boolean = false; // 内容是否溢出
  isEnter: boolean = false; // 鼠标是否进入当前节点
  tooltipConfig: object = {
    placement: "top",
    effect: "light",
  }; // 提示配置
  inputConfig: object = {}; // 输入框配置
  /*** computed ***/
  get customizedAttrs() {
    return {
      size: "medium",
      isShowTip: false,
      config: {
        placement: "top",
        effect: "light",
      },
      // 支持传过来的size覆盖默认的size
      ...this.$attrs,
    };
  }
  get isShow() {
    const self = this as any;
    return (
      self.isContentOverflow && self.customizedAttrs.isShowTip && self.isEnter
    );
  }
  /*** watch ***/
  @Watch("customizedAttrs.inputValue", { deep: true })
  getInputValue(newVal: string, oldVal: string) {
    const self = this as any;
    var input = self.$refs.inputRef.getInput();
    // 判断输入框文字内容是否超过输入框宽度
    self.isContentOverflow = input.offsetWidth < input.scrollWidth;
    self.initData();
  }

  /*** created ***/
  created() {
    console.log(this.$attrs, this.$listeners);
    this.initData();
  }

  /*** methods ***/

  // 初始化数据
  initData() {
    const self = this as any;
    let {
      isShowTip,
      inputValue,
      config,
      ...inputConfig
    } = self.customizedAttrs;
    self.$set(self, 'inputConfig', inputConfig);
    self.tooltipConfig = Object.assign({}, self.tooltipConfig, config);
  }
  // 判断输入框输入文字是否超出区域
  enterInput() {
    const self = this as any;
    const input = self.$refs.inputRef.getInput();
    self.isEnter = true;
    // 判断输入框文字内容是否超过输入框宽度
    self.isContentOverflow = input.offsetWidth < input.scrollWidth;
  }
  // 离开隐藏提示
  leaveInput() {
    const self = this as any;
    self.isEnter = false;
    self.isContentOverflow = false;
  }
}
</script>

<style lang="less" scoped>
@import "./../index.less";
</style>

使用示例

 <MtInput
                      :placeholder="`请输入${item.label}`"
                      slot="reference"
                      type="text"
                      v-model="scope.row.locationProperty"
                      :size="size"
                      :inputValue="scope.row.locationProperty"
                      :isShowTip="isShowTip"
                      maxlength="200"
                    ></MtInput>

下次有需要再详细研究$listenner，作用好像是可以吧组件身上绑定的事件取过来绑定到该组件内部子组件身上，也就是一般那种element组件，这种第三方组件，你二次封装他的时候，就会有这种需求

7.关于http长短连接可以看看这篇文章 https://www.jianshu.com/p/3fc3646fad80

其实就是说，http是在应用层，tcp在传输层，传输层才建立连接，才又长短连接之说

而长连接是用connection:keep-alive开启，http1.1默认长连接，http1.0好像没有

然后长连接是建立后可以保持较长时间，相当于建立了一个长久的通道，这样多个http请求

就都可以走这里了，复用

如果是短连接那么不会保持，每次你要发http请求就又要建立tcp连接，很消耗资源

这就是长短连接

8.关于call bind apply的作用

Array.prototype.slice.call(obj)

这个的意思是，slice这个函数内部的this指向obj了

也就是说这这三个函数的作用是把调用它们的函数的内部的this指向传进去的那个对象

此处调用call的函数是slice，传进去的对象是obj，也就是说slice内部的this现在都是obj，指向obj了

懂？其实就这个意思，没啥

9.https://www.cnblogs.com/happy-king/p/9603395.html这篇http的报文属性

connection里的keepalive可以设置时间，keepalive：300 意思是保持300秒连接

10.一道面试题:如何每隔一秒打印1 2 3 4 5

// 如何间隔一秒输出1 2 3 4 5
// ---方法1

// for (let i = 0; i < 5; i++) {
//   setTimeout(() => {
//     console.log(i + 1)
//   }, (i + 1) * 1000)
// }

let timer = null
// ---方法2
// function timePromise(num) {
//   return new Promise((resolve, reject) => {
//     timer = setTimeout(() => {
//       console.log(num)
//       resolve(num)
//       clearTimeout(timer)
//     }, 1000)

//   })
// }

// async function outPut() {
//   for (let i = 0; i < 5; i++) {
//     await timePromise(i + 1)
//   }


// }
// outPut()


// 方法3
function interall(num) {
  if (num > 5) {
    return
  }
  setTimeout(() => {
    console.log(num)
    interall(++num)
    // num += 1
    // num++
    // ++num

    // interall(num++)//这个一直打印传入的值，为什么
    // 当前num已经传入给下一个interall函数的局部参数变量num,你此处后面num++的++赋值也只是赋值给当前这个num了
    // 而下一个interall函数的局部参数变量num你并没有改对不对，就是这样
    // 就好像
    // let a = 1
    // let b = a++
    // 但是b还是等于1，并没有说a++后面执行了++操作，b就变了，因为++只是改了a，这里的参数和这里是同一个意思
  }, 1000)
}

interall(1)

烟雨浥轻尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一些点的研究5

1.今天遇到一个问题，有个页面用import引入了一个对象文件然后我切换了路由，再回来，发现这个页面的对象文件的改变并没有重置也就是说，你开始的操作改变了引入的那个文件的写死的值，不会随着你页面刷新而刷新意思是import是引用，...
复制链接

扫一扫

专栏目录