Vue知识点汇总(实时更新修正)

Posted Marhoo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue知识点汇总(实时更新修正)相关的知识,希望对你有一定的参考价值。

一、class 与 style

  • 动态class( 与普通的 class 属性共存):可直接用对象,如果有普通class,应该用数组语法,对象中只有动态的
    :class="[{ active: isActive },errorClass]"
    :class="{ active: isActive, \'text-danger\': hasError }"
  • 内联样式:对象语法,驼峰和短横线都行
    :style="{ color: activeColor, fontSize: fontSize + \'px\' }"

二、v-if 与v-for与v-show

  • v-if切换多个元素标签,使用<template>包裹
  • Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染,需要key标识
  • v-show 不支持 <template> 元素,也不支持 v-else
  • v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销
    如果需要非常频繁地切换,则使用 v-show 较好
    如果在运行时条件很少改变,则使用 v-if 较好
  • 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。所有一般用有v-if的template包裹v-for,不让他们在同一层

三、列表渲染

#数组
v-for="(item,index) in items"
v-for="item of items"
#对象
v-for="value in object"
v-for="(value, key) in object"
v-for="(value, key, index) in object"
  • 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一key属性。理想的key值是每项都有的且唯一的id。
  • 一段取值范围的v-for <span v-for="n in 10">{{ n }} </span>
  • 不能直接修改数组某一项,长度
    使用this.$set(arr,index,newValue) 改变某项
    使用this.arr.splice(newLength)删除也会触发DOM更新

四、生命周期

  • beforeCreated实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • created实例创建完成后立即调用;数据观测,属性和方法的计算,watch/event事件回调已经完成;$el元素目前不可见;this可以使用;一般,异步获取数据在created里被赋值,用于初次渲染页面。
  • beforeMount实例挂载之前被调用;相关render函数首次被调用。
  • mounted实例挂载完成后立即调用;$el元素可用,此时可以操作DOM元素。
    注意mounted不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用vm.$nextTick替换掉mounted:
mounted: function () {
   this.$nextTick(function () {
   // Code that will run only after the
   // entire view has been rendered
   //[ nextTick: 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。]
   })
}
  • beforeDestory:实例销毁之前调用。在这一步,实例仍然完全可用
  • destroy实例销毁之后被立即调用

五、不要在watch、computed、method等选项属性上使用箭头函数定义函数

  • 例如在watch中searchQuery: newValue => this.updateAutocomplete(newValue)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。因为在标准函数中,this引用的是把函数当成方法调用的上下文对象,this指向的就是vue实例。在比如method函数(一般function写法下)中进行事件回调调用某个函数,this指向的并非想要的结果,此时把回调函数写成箭头函数的形式就可以解决问题,因为箭头函数的this就是父作用域的this,而父作用域就是method函数调用时生成的上下文作用域。从原理上的解释像vue中method函数中的代码,这个函数定义的时候是必须是一般函数。一般函数中指针this引用的是把函数当成方法调用的上下文,vue中就是实例vue把method函数作为方法调用,所以指向的是vue实例。method函数内部又有一个闭包箭头函数,这个闭包中的this指向的是method的上下文,而method的上下文是vue实例,所以就被覆盖了。闭包中的this指的就是vue实例也就是method的上下文,都是同一个。

六、事件修饰符:快速理解

  • .stop:防止事件冒泡,等同于javascript中的event.stopPropagation()
    防止事件冒泡,通俗来说就是阻止事件向父元素传递,阻止任何父事件处理程序被执行,等同于JavaScript中的event.stopPropagation()。
  • .prevent:防止执行预设的行为,等同于JavaScript中的event.preventDefault()
    某些标签拥有自身的默认事件,比如<a>标签点击后会进行页面的跳转。这类默认事件虽然是冒泡后开始的,但不会因为stop而停止执行。阻止执行这类预设的行为,.prevent就派上用场了。例如下: <a href="http://www.baidu.com" @click.prevent>点击跳转</a>
  • .capture:捕获冒泡
    捕获冒泡,即冒泡发生时,有.capture修饰符的dom元素会优先执行。我们还是用回stop时候的例子,正常情况下点击最内层按钮,是由下往上冒泡。
  • .self:将事件绑定到自身,只有自身才能触发
    将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响。
  • .once:只触发一次
    这个比较好理解,加上once修饰符以后事件只触发一次,但是不影响事件的冒泡,上层的事件仍然会被触发,并且页面刷新后这个次数会重置。
  • .passive:不阻止事件的默认行为
    `.passive是2.3.0 新增的修饰符。这里涉及到一个问题,为什么需要告诉浏览器不阻止事件的默认行为?
    原因是这样的,浏览器只会在每次触发监听器的时候,才去判断这次是否有调用preventDefault()来阻止默认行为。这样的判断,在某些场景下会影响交互,像用户通过手势滑动页面时,就没法迅速滚动了,而使用.passive就可以提前告诉浏览器,我们没有用preventDefault阻止默认动作,你也不用反复去判断了,从而提高性能解决卡顿。`

七、Vue插槽

  • Vue具名插槽:
    就是子组件中的提供给父组件使用的一个占位符,用<slot> </slot>表示,父组件可以在这个占位符中填充任何模板代码,如 html、组件等,填充的内容会替换子组件的<slot> </slot>标签。
    2.6.0以后的版本中的用法是这样的:<template v-slot:header>// 在父组件中使用模板语法,使用v-slot绑定插槽的名字。
    <slot name="header"></slot>// 在子组件中仍然使用name来作为插槽的标识符。
    或者直接把 slot 属性用在一个普通元素上,例如:<h1 slot="header">Here might be a page title</h1>。这种写法是在2.6.0之前版本的语法,现在已经废弃。
  • Vue作用域插槽:
    有时让插槽内容能够访问子组件中才有的数据是很有用的,但是因为只有子组件可以访问到例如user数据,而我们提供的内容是在父级渲染的。
    为了让user数据在父级的插槽内容中可用,第一步:我们可以将user作为元素的一个属性attribute绑定上去,<slot v-bind:user="user"> {{ user.lastName }} </slot>。
    第二步:绑定在元素上的属性被称为插槽 prop。现在在父级作用域中,我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字。<template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template>,在这个例子中,我们选择将包含所有插槽 prop 的对象命名为 slotProps,但你也可以使用任意你喜欢的名字。
  • 注意事项:
    默认插槽的缩写语法不能和具名插槽混用,因为它会导致作用域不明确。
    只要出现多个插槽,请始终为所有的插槽使用完整的基于 <template> 的语法:
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>

以上是关于Vue知识点汇总(实时更新修正)的主要内容,如果未能解决你的问题,请参考以下文章

罗宁喊话调整:11日在线hotfix更新汇总

Vue知识点精简汇总

欢迎进入vue技术实战篇

优化理论19----DNRTR无约束优化的对角拟牛顿修正方法

vue项目之echarts的整理汇总(持续更新中)

关于vue知识点汇总,附答案