分享几个前端开发神器 Vue 使用小技巧

发布于 2019-01-26 22:31:16 字数 3345 浏览 2466 评论 0

使用 Vue 以后简直爱不释手，这倒不是吹嘘 Vue 如何如何，而是这种开发的模式比起传统的开发模式要更加的优雅，用数据驱动视图，开发中我们只需要关心数据的变化，而不需要在一个个的去寻找 DOM 元素，开发文章页比较的全面，但是是个东西总会有一些坑需要我们踩，这篇文章分享几个 Vue 的使用小技巧。

Style 元素添加 Scoped

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，请看下面的代码：

<template>
  <div>这里是测试文本</div>
</template>
<style scoped>
div{ color:#CCC; }
</style>

最终打包会生成下面的代码：

<div>这里也是</div>
<div data-v-1b971ada>这里是测试文本</div>
<style>
div[data-v-1b971ada]{
  color:#CCC
}
</style>

它会为组件中所有的标签和 Class 样式添加一个 Scoped 标识，就像上面结果中的 data-v-1b971ada 一样。

Vue 数组/对象更新视图不更新

很多时候，我们习惯于这样操作数组和对象：

data(){ // data数据
  return {
    arr: [1,2,3],
    obj:{
      a: 1,
      b: 2
    }
  };
},
// 数据更新 数组视图不更新
this.arr[0] = 'OBKoro1';
this.arr.length = 1;
console.log(arr);// ['OBKoro1'];
// 数据更新 对象视图不更新
this.obj.c = 'OBKoro1';
delete this.obj.a;
console.log(obj);  // {b:2,c:'OBKoro1'}

由于 JavaScript 的限制，Vue 不能检测以上数组元素值的变动，以及对象的添加/删除，很多人会因为像上面这样操作，出现视图没有更新的问题。

Vue 早就想到了这一点，使用 $set 方法就能触发视图的更新：

this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象

数组原生方法触发视图更新

Vue可以监测到数组变化的，数组原生方法：

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

意思是使用这些方法不用我们再进行额外的操作，视图自动进行更新，推荐使用splice方法会比较好自定义,因为slice可以在数组的任何位置进行删除/添加操作。

替换数组/对象

比如你想遍历这个数组/对象，对每个元素进行处理，然后触发视图更新。

// filter遍历数组，返回一个新数组，用新数组替换旧数组
exa.items = exa.items.filter(function(item){
  return item.message.match(/Foo/)
})

可以先把这个数组/对象保存在一个变量中，然后对这个变量进行遍历，等遍历结束后再用变量替换对象/数组。

Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

数据更新但是 JS 报错提示数据不能为空

有些时候我们可能我们需要在数据更新以后，执行一些 DOM 的操作，可能你会发现有些时候 JS 会报错，无法找到元素或者数据不能为空，Vue 的视图渲染是需要一定的时间的，当我们的给某个列表或者变量赋值，然后马上操作 DOM 就会导致上述错误，这个时候我们就需要使用 $nextTick 回调。

this.$nextTick(()=>{
  // do something
})

$nextTick 在视图更新以后才执行回调函数。

不要滥用箭头函数

我也是在接触到 Vue 以后才慢慢的使用箭头函数，这个是 ES6 中的新东西，用起来很优雅但是并不是什么时候都能用，这些情况下不要使用箭头函数：

不应该使用箭头函数来定义一个生命周期方法
不应该使用箭头函数来定义 method 函数
不应该使用箭头函数来定义计算属性函数
不应该对 data 属性使用箭头函数
不应该使用箭头函数来定义 watcher 函数

handler:(val, oldVal)=> { // 可以执行
  console.log("默认触发一次", val, oldVal);
  },
// method：
methods: {
  plus: () => { // 可以执行
    // do something
  }
}
// 生命周期:
created:()=>{ // 可以执行
  console.log('lala',this.obj) 
}

上面的这些写法都可以很好的执行，但是箭头函数绑定了父级作用域的上下文，this 将不会按照期望指向 Vue 实例，也就是说，你不能使用 this 来访问你组件中的 data 数据以及 method 方法了，this 将会指向 undefined。

项目启动页和 404 页面

启动页实际上就是应用的第一个页面，只不过我们一般都会配置成首页，当然你也可以配置成一个启动页面：

export default new Router({
  routes: [
    {
      path: '/', // 项目启动页
      redirect:'/run'  // 重定向到下方声明的路由 
    },
    {
      path: '*', // 404 页面 
      component: () => import('./notFind') // 或者使用component也可以的
    },
  ]
})