vue学习 --- 第四天

目录：

1、optionsapi---computed计算属性使用

2、computed和method区别（computed里面写方法是语法糖的格式，也可以写成对象形式）

3、computed的set和get

4、侦听器watch选项卡使用（watch里面写方法是语法糖的格式，也可以写成对象形式，注意深度监听的写法）

5、侦听器watch其他写法（了解）

6阶段性综合案例练习

一、computed计算属性使用

 1、利用插值语法

 2、利用method方法

 3、利用计算属性computed

 data里面的变量都是响应式的数据

computed的两种格式：

   

 里面的变量和使用data里面的变量的方法一样：

 

 计算属性更加简洁、见名知意、还具有缓存：

 像这样子调用方法，方法会被一直重新调用，要是方法里面有很多代码，那方法里面的代码就会被执行很多次。影响性能

 由于计算属性是有优化功能的，所以只要computed里面的变量所用到的变量值没发生变化，那么这三次调用都只执行一次computed的变化。不会像method一旦调用就一定要执行方法里面的所有代码（这个就是缓存）

另外，method和computed的变量都是响应式的。

 三、computed的set和get

计算属性的完整写法（正常比较少用）：

 需要注意的是set里面的值是要依靠method里面的方法来设置参数的，上图setFullname（）方法就是调用computed里面的变量来进行设置值的。另外要知道一个语法就是，对象类型里面有get和set属性。

语法糖的写法和单写一个get差不多：

四、侦听器watch选项卡使用

 

 可以用来做搜索框的输入提示的，就像百度搜索，输入内容之后就会显示类似的内容。

1、如何使用watch。2、如何使用watch监听变量的参数

注意点： 

 （1）watch里面的方法名字是你要监听的某个data或props的变量名称。名称不能乱写，要监听哪个变量就写变量名称。

（2）在watch监听的变量在变化的时候是可以拿到新的值和旧的值的。需要在（）括号里面添加参数。

 （3）在watch里面也是可以使用set，get的。set的方法还是和computed的一样，需要添加一个方法来设置变量。

（4）如果变量是对象类型，那console.log打印出来的内容是proxy代理的对象，如何拿到需要的原始对象么？

这种方法拿到的是新的对象，不是原来的对象

 这个方法是vue专门提供的方法

3、watch的侦听选项

template里面监听的变量，即使是对象里面的某个值发生变化，视图也会发生响应式变化，是默认深度监听的。

这里要说的是watch默认是不会有深度监听对象类型的变量的某个值发生变化的，不会有任何响应。

如何打开深度监听呢：

 打开深度监听的情况下，新旧值会显示是一样的。vue官方解释是：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

4、第一次渲染直接执行一次监听器

使用immediate选：

 监听的时候可以特地监听info对象类型里面的name属性。这种写法

五、侦听器watch其他写法（了解）

  1、监听后调用method里面的方法：

2、侦听对象里面的某个属性 

 

六、阶段性综合案例练习

 

总结：