vue笔记

vue生命周期

  1. beforeCreated:在这个生命周期之间,进行初始化事件,进行数据的观测。

  2. created:数据和data属性进行绑定。注意:此时还没有el选项。

  3. beforeMount:首先判断对象是否有el选项。

    • 如果没有el选项则停止编译,也就意味着停止了生命周期。
    • 如果有的话就继续向下编译,然后看template参数选项
      • 如果vue实例对象中有template参数选项,则将其作为模板编译成render函数
      • 如果没有template选项,则将外部HTML作为模板编译
      • 总结:render函数选项 > template选项 > outer HTML
    • 总结:beforeMount此时是给vue实例对象添加el成员
  4. mounted:将通过{{}}进行占位的数据进行绑定

  5. beforeUpdate:当vue发现data中的数据发生了改变,会触发对应组件的重新渲染

  6. update:对应组件的重新渲染完成

  7. beforeDestory:在vue实例销毁之前调用。在这一步实例仍然完全可用

  8. destoryed:vue实例销毁后调用。调用后,vue实例指示的所有东西都会解绑,所有的事件监听都会被移除,所有的子实例也会被销毁。

使用JavaScript表达式

vue.js完全支持JavaScript表达式,这些表达式会在所属vue实例的数据作用域下作为JavaScript被解析。有个限制就是,每个绑定都只能包含单个表达式。

vue 用key管理可复用的元素

vue会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。
但有时我们需要两个元素是完全独立的,不要复用它们,这时只需添加一个具有唯一值的key属性即可。

vue中v-if vs v-show

  • v-if:是惰性的如果在初始渲染时条件为假,则什么也不做。直到条件第一次变为真时才会开始渲染条件块

  • v-show:不管初始条件是什么,元素总是会被渲染,并且只是简单地基于css中的display属性进行切换

  • 总结:v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件很少改变,则使用v-if较好。

你可能感兴趣的:(read,summary)