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较好。