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

　　 文章内容总结 :

　　 组件 style 的 scoped

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

　　 vue filters 过滤器的使用

　　 列表渲染相关

　　 深度 watch 与 watch 立即触发回调

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

　　 路由懒加载写法

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

　　 Vue 调试神器 :vue-devtools

　　 组件 style 的 scoped:

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

　　 场景 :

　　 <template>

　　 <div></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><div></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 过滤器文档，你会更了解它的。