vue开发小技巧

这里分享几个我使用到的vue开发小技巧

一、状态共享

使用Vue进行开发时，随着项目的复杂化，组件个数也逐渐增加，此时我们就面临着一个问题——多组件状态共享。当然有人会说使用Vuex来解决啊，但是如果此时我们的项目没有那么大那么复杂，在使用Vuex会导致繁琐冗余

那该怎么办？其实我们还可以通过vue.js2.6版本新增的Observable API来解决这个问题。

示例a) 创建一个 store.js，包含一个store和一个mutations，分别用来指向数据和处理方法。

import Vue fomr 'vue'
export const Vue.observable( obj: {count: 0 })
export const mutations = {
  steCount(count){
  store.count = count
  }
}

b) 在 App.vue里面引入这个 store.js，使用引入的数据和方法。

<template>
  <div id="app">
    <p>count:{{count}}</p>
    <div @click="steCount(count+1)">+1</div>
    <div @click="steCount(count-1)">-1</div>
  </div>
  <template>
  <script>
    import { store, mutations } from '/store/store';
    export default {
      name: "App",
      computed: {
        count(){
          return store.count;
        }
      },
      methods:{
        steCount:mutations.setCount
      }
    }
  <script>

二、长列表性能优化

Vue会通过劫持我们的数据，进而实现视图响应数据的变化。但有时候我们的数据不需要发生变化，只是纯粹的数据展示，此时Vue再进行数据劫持会大大增加组件初始化时间。此时我们可以使用object.freeze方法来阻止vue劫持数据，进而减少组件初始化时间。

示例

export default {
  data() {
    users:{}
  },
async created(){
    const  users = await axios.get("/api/users");
    this.users = Object.freeze(users)
  },
  methods: {
    // 改变值不会触发视图响应
    this.data.urses[0] = nweValue
    // 改变引用依然回触发视图响应
    this.data.users = newArray
}
}

三、作用域插槽

所谓的作用域插槽，就是父组件在调用子组件时给子组件传输一个插槽，且该插槽必须放在template标签里边，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式。

那作用域插槽有什么用处呢？

比如项目中有一个A组件只负责布局不管数据逻辑，另一个B组件负责数据处理，A组件需要数据的时候就去B组件中取。那当开发过程中我们的布局发生变化时，我们只需要修改A组件即可，而不需要修改B组件，这样就能充分复用B组件的数据逻辑处理。

示例

a) 创建一个user.vue组件，将user数据绑定在元素上

<span>
  <slot v-bind:user="user">
    {{ user.lastName}}
  </slot>
</span>

b) 在父组件中引用 user组件，展示user数据的firstName数据，此时给 v-slot带一个值来定义我们提供的插槽 prop 的名字：

<v-user v-slot:default="slotProps">
{{slotProps.user.firstName}}
</v-user>

四、web worker

JS 是单线程的, 那么到底能不能同时做两个事情呢，利用web worker是可以的web worker 就给我提供了一个多线程环境

可以在主线程环境下, 开启一个 worker 环境线程我们可以将一些比较费时间的任务交给 worker 线程来做

我们的主线程还是继续做主线程的事情

这样, 就可以达到两个事情同时开始

通常, 我们都会在 worker 线程里面进行一些计算量比较大的任务

在主线程里面进行页面交互行为, 这样不会被阻塞或者拖慢

示例

console.time('test for')
console.time('test timeout')
 
for (var i = 0; i < 1000000000; i++) { }
 
console.timeEnd('test for')
 
setTimeout(() => {
 
    console.log('定时器')
 
    console.timeEnd('test timeout')
},2000)

利用 poseMessage 和 onMessage 来实现在 worker.js 里面发出结果

// worker.js
console.time('test for')
 
var sum = 0
for (var i = 0; i < 1000000000; i++) {
    sum += i
}
 
postMessage(sum)
 
console.timeEnd('test for')

在主线程接受结果

<script>
    console.time('test timeout')
    var w = new Worker('./worker.js')
    
    w.onmessage = function (e) {
        console.log(e.data)
    }
 
    setTimeout(() => {
      console.log('定时器')
      console.timeEnd('test timeout')
    }, 2000)
</script>

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。