你或许不知道Vue的这些小技巧

点击"万和IT教育"关注我们

前言

用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候,心里大概有个谱知道该如何去解决问题。这篇文章是将自己知道的一些小技巧,结合查阅资料整理成的一篇文章。

文章内容总结:

1.组件style的scoped

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

3.vue filters 过滤器的使用

4.列表渲染相关

5.深度watch与watch立即触发回调

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

7.路由懒加载写法

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

9.Vue调试神器:vue-devtools

组件style的scoped:

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

场景:

结果:

原因:

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

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

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

解决方式

推荐:去掉该组件的scoped

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

可以动态添加style

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

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

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

解决方式:

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

如果还是不懂的话,可以看看这个codependemo(https://codepen.io/OBKoro1/pen/oyjdbZ)。

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

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

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

推荐使用splice方法会比较好自定义,因为slice可以在数组的任何位置进行删除/添加操作,这部分可以看看我前几天写的一篇文章:【干货】js 数组详细操作方法及解析合集(https://juejin.im/post/5b0903b26fb9a07a9d70c7e0?utm_source=gold_browser_extension#heading-7)

替换数组/对象

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

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

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

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

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

vue filters 过滤器的使用:

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

在html模板中的两种用法:

在组件script中的用法:

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

如果不想自己试,可以点这个demo(https://codepen.io/OBKoro1/pen/rKxBMw)里面修改代码就可以了,demo中包括过滤器串联、过滤器传参。

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

列表渲染相关

v-for循环绑定model:

input在v-for中可以像如下这么进行绑定,我敢打赌很多人不知道。

为此,我做了个demo点击预览,你可以点进去试试。

一段取值的v-for

如果我们有一段重复的html模板要渲染,又没有数据关联,我们可以:

v-if尽量不要与v-for在同一节点使用:

v-for 的优先级比 v-if 更高,如果它们处于同一节点的话,那么每一个循环都会运行一遍v-if。

如果你想根据循环中的每一项的数据来判断是否渲染,那么你这样做是对的:

如果你想要根据某些条件跳过循环,而又跟将要渲染的每一项数据没有关系的话,你可以将v-if放在v-for的父节点

如上,正确使用v-for与v-if优先级的关系,可以为你节省大量的性能。

深度watch与watch立即触发回调

watch很多人都在用,但是这watch中的这两个选项deep、immediate,或许不是很多人都知道,我猜。

选项:deep

在选项参数中指定 deep: true,可以监听对象中属性的变化。

选项:immediate

在选项参数中指定 immediate: true, 将立即以表达式的当前值触发回调,也就是默认触发一次。

这两个选项可以同时使用,另外:是的,又有一个demo(https://codepen.io/OBKoro1/pen/QxyWMa)。

还有下面这一点需要注意。

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

不应该使用箭头函数来定义一个生命周期方法

不应该使用箭头函数来定义 method 函数

不应该使用箭头函数来定义计算属性函数

不应该对 data 属性使用箭头函数

不应该使用箭头函数来定义 watcher 函数

示例:

是的,没错,这些都能执行。

but:

箭头函数绑定了父级作用域的上下文,this 将不会按照期望指向 Vue 实例。

也就是说,你不能使用this来访问你组件中的data数据以及method方法了。

this将会指向undefined。

路由懒加载写法:

文档的写法在于问题在于:如果我们的路由比较多的话,是不是要在路由上方引入赋值十几行组件?

第一种跟第二种方法相比就是把引入赋值的一步,直接写在component上面,本质上是一样的。两种方式都可以的,大家自由选择哈。

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

实际上这也就是一个设置而已:

404页面指的是: 当进入一个没有 声明/没有匹配 的路由页面时就会跳转到404页面。

Vue调试神器:vue-devtools

每次调试的时候,写一堆console是否很烦?想要更快知道组件/Vuex内数据的变化?

那么这款尤大开发的调试神器:vue-devtools,你真的要了解一下了。

这波稳赚不赔,真的能提高开发效率。

安装方法:

谷歌商店+科学上网,搜索vue-devtools即可安装。

不会科学上网?手动安装(https://segmentfault.com/a/1190000009682735)

安装之后:

在chrome开发者工具中会看一个vue的一栏,如下对我们网页应用内数据变化,组件层级等信息能够有更准确快速的了解。

前几个月也写过一篇类似的:Vue 实践过程中的几个问题(https://juejin.im/post/5a587b46f265da3e3b7a7677)

结语

本文的内容很多都在Vue文档里面有过说明,推荐大家可以多看看Vue文档,不止看教程篇,还有文档的Api什么的,也都可以看。然后其实还有两三点想写的,因为预计篇幅都会比较长一点,所以准备留到以后的文章里面吧~

作者:obkoro1

进入IT高薪圈,选万和!

不用担心自己零基础

不用担心自己不适合

不用担心如何选课程

扫一扫申请免费课程

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180607A1J3Z700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券