好程序员分享Vue的一些小技巧

Posted 2020-11-10 gcghcxy

　　好程序员分享Vue的一些小技巧，前言：用Vue开发一个网页并不难，但是也经常会遇到一些问题，其实大部分的问题都在文档中有所提及，再不然我们通过谷歌也能成功搜索到问题的答案，为了帮助小伙伴们提前踩坑，在遇到问题的时候，心里大概有个谱知道该如何去解决问题。这篇文章是将自己知道的一些小技巧分享给大家，希望看完本文可以有所收获。

 

　　文章内容总结:

　　组件style的scoped

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

　　vue filters 过滤器的使用

　　列表渲染相关

　　深度watch与watch立即触发回调

　　这些情况下不要使用箭头函数

　　路由懒加载写法

　　路由的项目启动页和404页面

　　Vue调试神器:vue-devtools

　　组件style的scoped:

　　问题：在组件中用js动态创建的dom，添加样式不生效。

　　场景:

　　<template>

　　<div class="test"></div>

　　</template>

　　<script>

　　let a=document.querySelector(‘.test‘);

　　let newDom=document.createElement("div"); // 创建dom

　　newDom.setAttribute("class","testAdd" ); // 添加样式

　　a.appendChild(newDom); // 插入dom

　　</script>

　　<style scoped>

　　.test{

　　background:blue;

　　height:100px;

　　width:100px;

　　}

　　.testAdd{

　　background:red;

　　height:100px;

　　width:100px;

　　}

　　</style>

　　结果：

　　// test生效 testAdd 不生效

　　<div data-v-1b971ada class="test"><div class="testAdd"></div></div>

　　.test[data-v-1b971ada]{ // 注意data-v-1b971ada

　　background:blue;

　　height:100px;

　　width:100px;

　　}

　　原因:

　　当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

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

　　所以原因就很清楚了：因为动态添加的dom没有scoped添加的标识，没有跟testAdd的样式匹配起来，导致样式失效。

　　解决方式

　　推荐：去掉该组件的scoped

　　每个组件的css并不会很多，当设计到动态添加dom，并为dom添加样式的时候，就可以去掉scoped，会比下面的方法方便很多。

　　可以动态添加style

　　// 上面的栗子可以这样添加样式

　　newDom.style.height=‘100px‘;

　　newDom.style.width=‘100px‘;

　　newDom.style.background=‘red‘;

　　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‘}

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

　　解决方式:

　　this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)

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

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

　　如果还是不懂的话，可以看看这个codependemo。

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

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

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

　　意思是使用这些方法不用我们再进行额外的操作，视图自动进行更新。

　　推荐使用splice方法会比较好自定义,因为slice可以在数组的任何位置进行删除/添加操作，这部分可以看看我前几天写的一篇文章:【干货】js 数组详细操作方法及解析合集

　　3.替换数组/对象

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

　　// 文档中的栗子: filter遍历数组，返回一个新数组，用新数组替换旧数组

　　example1.items = example1.items.filter(function (item) {

　　return item.message.match(/Foo/)

　　})

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

　　并不会重新渲染整个列表:

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

　　如果你还是很困惑，可以看看Vue文档中关于这部分的解释。

　　vue filters 过滤器的使用:

　　过滤器，通常用于后台管理系统，或者一些约定类型，过滤。Vue过滤器用法是很简单，但是很多朋友可能都没有用过，这里稍微讲解一下。

　　在html模板中的两种用法：

　　<!-- 在双花括号中 -->

　　{{ message | filterTest }}

　　<!-- 在 `v-bind` 中 -->

　　<div :id="message | filterTest"></div>

　　在组件script中的用法:

　　export default {

　　data() {

　　return {

　　message:1

　　}

　　},

　　filters: {

　　filterTest(value) {

　　// value在这里是message的值

　　if(value===1){

　　return ‘最后输出这个值‘;

　　}

　　}

　　}

　　}

　　用法就是上面讲的这样，可以自己在组件中试一试就知道了，很简单很好用的。

　　如果不想自己试，可以点这个demo里面修改代码就可以了，demo中包括过滤器串联、过滤器传参。

　　推荐看Vue过滤器文档，你会更了解它的。