Vue学习总结2

计算属性

1. 定义：要用的属性不存在，要通过已有属性计算得来
2. 原理：底层借助了Object.defineProperty方法提供的getter和setter
3. get函数什么时候执行？
   （1）初次读取时会执行一次
   （2）当依赖的数据发生改变时会被再次调用
4. 优势：与methods实现相比，内部会有缓存机制（复用），效率更高，调试方便。
5. 备注：
   1.计算属性最终会出现再vm上，直接读取使用即可
   2.如果计算属性要修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

侦听器watch

1. 当被监视的属性变化时,回调函数自动调用,进行相关操作
2. 监视的属性必须存在,才能进行监视
3. 监视的两种写法:
   (1) new Vue 时传入watch配置
   (2)通过vm.$watch监视

深度侦听:
(1)Vue中的watch默认不监测对象内部值的改变(一层)
(2)配置deep:true 可以监测对象内部值改变
备注:
(1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以
(2)使用watch时根据数据的具体结构,决定是否采用深度监视

computed和watch之间的区别:

1. computed能完成的功能,watch都能完成
2. watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作

原则:

1. 所被Vue管理的函数,最好写成普通函数,这样this指向才是vm或组件实例对象
2. 所有不被Vue所管理的函数(定时器的回调函数,ajax的回调函数等,promise的回调函数)最好写成箭头函数,这样this的指向才是vm或组件实例对象

绑定样式

1. class样式

   写法:class=“xxx” xxx可以时字符串 对象 数组

   • 字符串写法适用于:类名不确定,要动态获取
   • 对象写法适用于:要绑定多个样式,个数不确定,名字也不确定
   • 数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用

2. style样式
   :style="{fontSize: xxx}“其中xxx是动态值
   :style=”[a,b]"其中a,b是样式对象

条件渲染

1. v-if

   写法:
   	(1)v-if="表达式"
   	(2)v-else-if="表达式"
   	(3)v-else="表达式"
   
   适用于:切换频率较低的场景
   特点:不展示的DOM元素直接被移除
   注意:v-if可以和v-else-if v-else 一起使用,但要求结构不能被打断
   

2. v-show
   写法:v-show=“表达式”
   适用于:切换频率较高的场景
   特点:不展示的DOM未被移除,仅仅是使用样式隐藏掉

3. 备注:使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到