Vue笔记 03

一、计算属性

为了满足需求的同时，适代码不冗长，可读性差.

.slice(a,b)截取:从索引为a的那项开始截取b个.

一旦数据变化，模板就会重新解析.

对于Vue来说，Vue实例中配置项data中写的东西就是属性(属性名，属性值).

计算属性需要一个全新的配置项(computed)

计算属性中this指向的是vm(Vue维护好的).

读取四次fullName，只调用一次get.是因为除了第一次get被真正调用，其他读取通过缓存来读取 

相比于methods写法， 计算属性只需要调用1次，而 methods写法需要调用5次.

计算属性(computed)不同于data与methods，它不直接将它其中的对象放到Vue实例上，它往vm上放的时候，自动去找到get，调用get，拿到get的返回值，然后放到vm身上，放的时候名字是其中拥有的对象的名字.

如果以后要修改computed中的数据，就要配置set方法.(不用修改，可以不配置)

简写形式(不需要set，set被省略):

 

表面上是一个函数，实际上是执行完这个函数，往vm上放了一个fullName的属性，值是函数调用完的结果. 

---

 二、监视属性 

写一个天气案例.

info()和changeWeather()函数中this都是vm.

@click后面可以写一些简单的语句，理论上可以不写方法，把语句直接写在这，但是如果罗列的多了，就不太合适了. 

 新建一个watch配置项，用来监视属性.

handler函数，可以获取新的值与旧的值. 

计算属性也可以被监视到.

除了watch配置项，还可以通过vm进行监视.

 

 深度监视，需要用''把对象中的key包起来(不可以使用简写形式)

Vue默认可以监测多层级数据的改变的， 但Vue提供的watch配置项默认是不行的，想让watch可以监测，需要配置deep:true. 

默认不开启深度监视，是为了效率，如果数据结构简单，就不需要深度监视，如果层级很多，就手动开启深度监视.

如果不需要immediate和deep，就可以简写.也就是配置项中，只有handler函数的时候，可以简写.

 函数名就是监视的是谁，函数就当handler用.

 计算属性与监视属性对比:

 计算属性只需要准备姓和名，全名通过计算属性来拼.

 需要提前准备fullName初始值，监视姓的同时，还要监视名，所有姓，名，全名都属于属性.

如果计算属性与监听属性都可以满足需求的时候，优先使用计算属性.

 watch中可以很容易的开启异步任务.

在计算属性中添加定时器，返回值交给了粉色函数，fullName没有返回值，undefined.

计算属性中，依靠返回值，不能开启异步任务来维护数据的.

---

 三、绑定样式

不变化的样式正常写，变化的样式用绑定的方式写(Vue的工作方式) ，最终Vue会将样式汇总.

 

随机生成数，Math.random(0-1之间，不包括1) 

 

通过Style绑定样式，要求由两个单词组成的key值，需要用驼峰式书写. 

---

四、条件渲染 

 

v-show底层实现，就是调整原生js中display属性.

 

v-if会直接删除DOM节点.

v-show与v-if对比:

如果切换频率频繁，建议使用v-show，因为v-showDOM节点在，只是控制隐藏或者显示.

 

相对于div标签，template标签不会破坏结构，模板解析的时候，会自动忽略template标签.

template标签只能配合v-if使用，不能配合v-show使用.