[JavaScript知识库]一些点的研究5

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

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

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

意思是import是引用，而不是拷贝，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