vue基础知识

v-if 和 v-show的区别

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换v-show较好，如果在运行时条件不大可能改变v-if较好。

v-if是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。(销毁与重建)

v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。

computed(计算属性) vs methods(方法 )

在vue.js中，有methods和computed两种方式来动态当作方法来用的。

1.首先最明显的不同 就是调用的时候，methods要加上（）

2.我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。 而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

computed(计算属性) vs watch(侦听器)

computed(计算属性)

写在computed中

写起来像一个方法，用起来像一个属性（本质就是一个属性）

注意点：

• 只要跟计算属性相关的数据发生了改变，计算属性就会重新计算， 不相关的值发生变化，不会重新计算计算属性
  - 一定要有返回值(return)

• 什么时候使用计算属性
  根据已知data中的值，生成一个额外的新值，且新值还要跟着data中的值变化而变化

• computed里面的计算属性名不能和data中的属性名重名

watch(侦听器)

可以通过watch监听一个属性值的变化，只要值发生了变化，就会调用watch的一些方法

watch是vm的一个配置项

监听的属性按照一个方法的格式来写

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

计算属性与侦听器的区别使用

watch：侦听器

- 侦听器监听属性数据发生变化去影响他人（如：千米和米的单位换算,省市联动选择）
- 自己改变  => 影响他人

computed：计算属性

- 只要 相关属性的数值发生了变化，计算属性会重新计算（如：姓和名拼接得到姓名）
- 根据已知的值，得到一个新值
- 别人改变 => 影响自己

---

实例：

计算属性：

方法：

侦听属性：

待续。。。