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>

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