VUE学习总结

最近在学习Vue，下面是学习过程中总结了一些基本的知识点。

个人对Vue的理解

由于vue是基于MVVM思想的双向绑定，让我们可以减少对dom元素的频繁操作，直接在数据层和视图层建立一种联系，方便使用。并且它通过组件化的方式，增加了代码的可复用性，可维护性，提高了开发效率。

一、vue生命周期函数

beforeCreate，created//创建前，创建完成

beforeMount，mounted//挂载前，挂载完成

beforeUpdate，updated//更新前，更新完成

beforeDestroy，destroyed//销毁前，销毁完成

二、vue生命周期钩子的this

生命周期钩子的this上下文指向调用它的vue实例

//注：不要在选项属性或回调上使用箭头函数，因为箭头函数是和父级上下文绑定在一起的

三、响应式属性

当一个vue实例被创建时，它向vue的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。但是只有当实例被创建时data对象中已经存在的属性才是响应式的。所以在一开始不会使用后面却要使用的属性，最好一开始就声明到data中，初始化为空值即可。

四、模板语法

在模板数据绑定时可以用单个JavaScript表达式

五、计算属性和侦听器

1、计算属性：

将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的计算属性是基于它们的依赖进行缓存的。

计算属性只有在它的相关依赖发生改变时，才会重新求值，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。

而对于方法，每当触发重新渲染时，调用方法将总会再次执行函数。

2、侦听器：watch

当需要在数据变化时执行异步或开销较大的操作时使用。

六、条件渲染

1、v-if:是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。

2、v-show：v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。

3、v-if与v-show对比：v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

4、v-if与v-for：当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。

5、v-if可以与计算属性和方法一起使用，但方法和计算属性名后不能有（），会报错。

七、过滤器

Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示：

<!--在双花括号中-->

{{message|capitalize}}

<!--在‘v-bind’中-->

<div v-bind:id="rawld|formatld"></div>

增加内容：

v-text与v-html

v-text：遇到html的字符串值时会转义成字符串显示

v-html：遇到html的字符串值时会解析成dom节点